/*! microsvc UI kit v1.0.1 - shell - https://ui.microsvcapi.com/ */
:root {
  /* Theme-independent tokens. Declarations only: lib/bundle.js wraps
     them in a :root rule. Every token is prefixed --msvc- so it cannot clash
     with the host page. */
  --msvc-font: Roboto, "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --msvc-font-mono: "Roboto Mono", ui-monospace, SFMono-Regular, Consolas, monospace;
  --msvc-type-title: 500 1rem/1.5rem var(--msvc-font);
  --msvc-type-label: 500 0.875rem/1.25rem var(--msvc-font);
  --msvc-type-body: 400 0.875rem/1.25rem var(--msvc-font);
  --msvc-type-caption: 400 0.75rem/1rem var(--msvc-font);
  --msvc-radius-xs: 4px;
  --msvc-radius-sm: 6px;
  --msvc-radius-md: 12px;
  --msvc-radius-lg: 16px;
  --msvc-radius-xl: 28px;
  --msvc-space-1: 4px;
  --msvc-space-2: 8px;
  --msvc-space-3: 12px;
  --msvc-space-4: 16px;
  --msvc-space-5: 24px;
  --msvc-bar-height: 52px;
  --msvc-z-bar: 1040;
  --msvc-motion-fast: 120ms;
  --msvc-motion-std: 200ms;
  --msvc-ease: cubic-bezier(0.2, 0, 0, 1);
}

:root,
[data-bs-theme="light"] {
  /* Light scheme: Material 3 colour roles (blue seed). Declarations only. */
  --msvc-primary: #0b57d0;
  --msvc-primary-rgb: 11, 87, 208;
  --msvc-on-primary: #ffffff;
  --msvc-primary-container: #d3e3fd;
  --msvc-on-primary-container: #041e49;
  --msvc-secondary: #00639b;
  --msvc-secondary-container: #c2e7ff;
  --msvc-on-secondary-container: #001d35;
  --msvc-tertiary: #146c2e;
  --msvc-tertiary-container: #c4eed0;
  --msvc-on-tertiary-container: #072711;
  --msvc-error: #b3261e;
  --msvc-on-error: #ffffff;
  --msvc-error-container: #f9dedc;
  --msvc-on-error-container: #410e0b;
  --msvc-surface: #f8fafd;
  --msvc-surface-rgb: 248, 250, 253;
  --msvc-surface-container-lowest: #ffffff;
  --msvc-surface-container-low: #f0f4f9;
  --msvc-surface-container: #e9eef6;
  --msvc-surface-container-high: #dde3ea;
  --msvc-surface-container-highest: #d3dbe5;
  --msvc-on-surface: #1f1f1f;
  --msvc-on-surface-rgb: 31, 31, 31;
  --msvc-on-surface-variant: #444746;
  --msvc-outline: #747775;
  --msvc-outline-variant: #c4c7c5;
  --msvc-inverse-surface: #303030;
  --msvc-inverse-on-surface: #f2f2f2;
  --msvc-scrim: rgba(0, 0, 0, 0.32);
  --msvc-elevation-1: 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px 3px 1px rgba(0, 0, 0, 0.15);
  --msvc-elevation-2: 0 1px 2px rgba(0, 0, 0, 0.3), 0 2px 6px 2px rgba(0, 0, 0, 0.15);
  --msvc-elevation-3: 0 4px 8px 3px rgba(0, 0, 0, 0.15), 0 1px 3px rgba(0, 0, 0, 0.3);
}

[data-bs-theme="dark"] {
  /* Dark scheme: Material 3 colour roles (blue seed). Declarations only. */
  --msvc-primary: #a8c7fa;
  --msvc-primary-rgb: 168, 199, 250;
  --msvc-on-primary: #062e6f;
  --msvc-primary-container: #0842a0;
  --msvc-on-primary-container: #d3e3fd;
  --msvc-secondary: #7fcfff;
  --msvc-secondary-container: #004a77;
  --msvc-on-secondary-container: #c2e7ff;
  --msvc-tertiary: #6dd58c;
  --msvc-tertiary-container: #0f5223;
  --msvc-on-tertiary-container: #c4eed0;
  --msvc-error: #f2b8b5;
  --msvc-on-error: #601410;
  --msvc-error-container: #8c1d18;
  --msvc-on-error-container: #f9dedc;
  --msvc-surface: #131314;
  --msvc-surface-rgb: 19, 19, 20;
  --msvc-surface-container-lowest: #0e0e0e;
  --msvc-surface-container-low: #1b1b1b;
  --msvc-surface-container: #1e1f20;
  --msvc-surface-container-high: #282a2c;
  --msvc-surface-container-highest: #333537;
  --msvc-on-surface: #e3e3e3;
  --msvc-on-surface-rgb: 227, 227, 227;
  --msvc-on-surface-variant: #c4c7c5;
  --msvc-outline: #8e918f;
  --msvc-outline-variant: #444746;
  --msvc-inverse-surface: #e3e3e3;
  --msvc-inverse-on-surface: #303030;
  --msvc-scrim: rgba(0, 0, 0, 0.6);
  --msvc-elevation-1: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.3);
  --msvc-elevation-2: 0 2px 6px 2px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.3);
  --msvc-elevation-3: 0 4px 8px 3px rgba(0, 0, 0, 0.15), 0 1px 3px rgba(0, 0, 0, 0.3);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-bs-theme]) {
    /* Dark scheme: Material 3 colour roles (blue seed). Declarations only. */
    --msvc-primary: #a8c7fa;
    --msvc-primary-rgb: 168, 199, 250;
    --msvc-on-primary: #062e6f;
    --msvc-primary-container: #0842a0;
    --msvc-on-primary-container: #d3e3fd;
    --msvc-secondary: #7fcfff;
    --msvc-secondary-container: #004a77;
    --msvc-on-secondary-container: #c2e7ff;
    --msvc-tertiary: #6dd58c;
    --msvc-tertiary-container: #0f5223;
    --msvc-on-tertiary-container: #c4eed0;
    --msvc-error: #f2b8b5;
    --msvc-on-error: #601410;
    --msvc-error-container: #8c1d18;
    --msvc-on-error-container: #f9dedc;
    --msvc-surface: #131314;
    --msvc-surface-rgb: 19, 19, 20;
    --msvc-surface-container-lowest: #0e0e0e;
    --msvc-surface-container-low: #1b1b1b;
    --msvc-surface-container: #1e1f20;
    --msvc-surface-container-high: #282a2c;
    --msvc-surface-container-highest: #333537;
    --msvc-on-surface: #e3e3e3;
    --msvc-on-surface-rgb: 227, 227, 227;
    --msvc-on-surface-variant: #c4c7c5;
    --msvc-outline: #8e918f;
    --msvc-outline-variant: #444746;
    --msvc-inverse-surface: #e3e3e3;
    --msvc-inverse-on-surface: #303030;
    --msvc-scrim: rgba(0, 0, 0, 0.6);
    --msvc-elevation-1: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.3);
    --msvc-elevation-2: 0 2px 6px 2px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.3);
    --msvc-elevation-3: 0 4px 8px 3px rgba(0, 0, 0, 0.15), 0 1px 3px rgba(0, 0, 0, 0.3);
  }
}

/* Unified shell: global top bar. Every selector is scoped to .msvc-shell and
   every class is prefixed msvc- so host CSS and this file cannot clash.
   Kit-owned elements are reset at class specificity (0,1,0) so plain host
   element rules (button {}, a {}, ul {}) do not leak in; host content placed
   in the title slot is NOT reset and keeps the host's own styles. */

.msvc-shell {
  all: initial;
  display: block;
  box-sizing: border-box;
  position: sticky;
  top: 0;
  z-index: var(--msvc-z-bar);
  width: 100%;
  color-scheme: light;
  font: var(--msvc-type-body);
  color: var(--msvc-on-surface);
  background: var(--msvc-surface-container);
  border-bottom: 1px solid var(--msvc-outline-variant);
  box-shadow: var(--msvc-elevation-1);
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}

[data-bs-theme="dark"] .msvc-shell,
.msvc-shell[data-bs-theme="dark"] {
  color-scheme: dark;
}

[data-bs-theme="light"] .msvc-shell,
.msvc-shell[data-bs-theme="light"] {
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-bs-theme]) .msvc-shell:not([data-bs-theme="light"]) {
    color-scheme: dark;
  }
}

.msvc-shell[data-msvc-position="static"] {
  position: relative;
}

.msvc-shell :where([class^="msvc-"], [class*=" msvc-"]) {
  all: unset;
  box-sizing: border-box;
}

.msvc-shell [hidden] {
  display: none !important;
}

.msvc-shell .msvc-shell__inner {
  display: flex;
  align-items: center;
  gap: var(--msvc-space-2);
  height: var(--msvc-bar-height);
  padding: 0 var(--msvc-space-3);
  max-width: 100%;
}

/* brand */
.msvc-shell .msvc-shell__product {
  display: inline-flex;
  align-items: center;
  gap: var(--msvc-space-2);
  flex: 0 0 auto;
  font: var(--msvc-type-title);
  color: var(--msvc-on-surface);
  white-space: nowrap;
  text-decoration: none;
  border-radius: var(--msvc-radius-sm);
  padding: var(--msvc-space-1) var(--msvc-space-1);
}

.msvc-shell a.msvc-shell__product {
  cursor: pointer;
}

.msvc-shell .msvc-shell__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: var(--msvc-radius-sm);
  background: var(--msvc-primary);
  color: var(--msvc-on-primary);
  font-size: 16px;
  line-height: 1;
}

/* icons (Bootstrap Icons font; ::before keeps its own font-family) */
.msvc-shell .msvc-ic {
  display: inline-block;
  font-size: 16px;
  line-height: 1;
  vertical-align: -0.125em;
}

/* buttons */
.msvc-shell .msvc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex: 0 0 auto;
  height: 34px;
  padding: 0 10px;
  border: 1px solid var(--msvc-outline-variant);
  border-radius: var(--msvc-radius-sm);
  background: transparent;
  color: var(--msvc-on-surface);
  font: var(--msvc-type-label);
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  text-decoration: none;
  transition: background-color var(--msvc-motion-fast) var(--msvc-ease), border-color var(--msvc-motion-fast) var(--msvc-ease);
}

.msvc-shell .msvc-btn:hover {
  background: rgba(var(--msvc-on-surface-rgb), 0.08);
}

.msvc-shell .msvc-btn:active {
  background: rgba(var(--msvc-on-surface-rgb), 0.12);
}

.msvc-shell .msvc-btn[aria-expanded="true"] {
  background: var(--msvc-secondary-container);
  border-color: var(--msvc-secondary-container);
  color: var(--msvc-on-secondary-container);
}

.msvc-shell .msvc-btn--icon {
  width: 34px;
  padding: 0;
}

.msvc-shell .msvc-btn--tonal {
  background: var(--msvc-secondary-container);
  border-color: var(--msvc-secondary-container);
  color: var(--msvc-on-secondary-container);
}

.msvc-shell .msvc-shell__caret {
  font-size: 11px;
  transition: transform var(--msvc-motion-fast) var(--msvc-ease);
}

.msvc-shell .msvc-btn[aria-expanded="true"] .msvc-shell__caret {
  transform: rotate(180deg);
}

/* focus: visible ring on every interactive kit element */
.msvc-shell .msvc-btn:focus-visible,
.msvc-shell .msvc-menu__item:focus-visible,
.msvc-shell .msvc-shell__product:focus-visible {
  outline: 2px solid var(--msvc-primary);
  outline-offset: 2px;
}

/* title / breadcrumb slot */
.msvc-shell .msvc-shell__slot {
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  min-width: 0;
  height: 28px;
  padding-left: var(--msvc-space-3);
  margin-left: var(--msvc-space-1);
  border-left: 1px solid var(--msvc-outline-variant);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--msvc-on-surface-variant);
}

/* Host content in the slot (for example a Bootstrap breadcrumb, which is a
   wrapping flex list) stays on one line and is clipped instead of wrapping
   out of the 52px bar. */
.msvc-shell .msvc-shell__slot > * {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}

.msvc-shell .msvc-shell__slot :where(ol, ul) {
  flex-wrap: nowrap;
  white-space: nowrap;
}

.msvc-shell .msvc-shell__slot:empty {
  border-left-color: transparent;
}

.msvc-shell .msvc-shell__title {
  display: block;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font: var(--msvc-type-label);
  color: var(--msvc-on-surface);
}

.msvc-shell .msvc-shell__actions {
  display: flex;
  align-items: center;
  gap: var(--msvc-space-2);
  flex: 0 0 auto;
  margin-left: auto;
}

/* popovers (Services menu, theme menu) */
.msvc-shell .msvc-pop {
  display: block;
  position: relative;
  flex: 0 0 auto;
}

.msvc-shell .msvc-menu {
  display: block;
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 1;
  width: 340px;
  max-width: calc(100vw - 16px);
  max-height: min(70vh, 480px);
  overflow-y: auto;
  padding: var(--msvc-space-2);
  border-radius: var(--msvc-radius-md);
  background: var(--msvc-surface-container-high);
  color: var(--msvc-on-surface);
  box-shadow: var(--msvc-elevation-2);
  border: 1px solid var(--msvc-outline-variant);
  animation: msvc-pop-in var(--msvc-motion-std) var(--msvc-ease);
}

.msvc-shell .msvc-menu--end {
  left: auto;
  right: 0;
}

.msvc-shell .msvc-menu--compact {
  width: 200px;
}

@keyframes msvc-pop-in {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: none; }
}

.msvc-shell .msvc-menu__head {
  display: block;
  padding: 6px 10px 8px;
  font: var(--msvc-type-caption);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--msvc-on-surface-variant);
}

.msvc-shell .msvc-menu__list,
.msvc-shell .msvc-menu__li {
  display: block;
  margin: 0;
  padding: 0;
  list-style: none;
}

.msvc-shell .msvc-menu__item {
  display: flex;
  align-items: flex-start;
  gap: var(--msvc-space-3);
  width: 100%;
  padding: 8px 10px;
  border-radius: var(--msvc-radius-sm);
  color: var(--msvc-on-surface);
  text-decoration: none;
  cursor: pointer;
  text-align: left;
}

.msvc-shell .msvc-menu__item--row {
  align-items: center;
}

.msvc-shell .msvc-menu__item:hover,
.msvc-shell .msvc-menu__item:focus-visible {
  background: rgba(var(--msvc-on-surface-rgb), 0.08);
}

.msvc-shell .msvc-menu__item.is-current,
.msvc-shell .msvc-menu__item[aria-pressed="true"] {
  background: var(--msvc-secondary-container);
  color: var(--msvc-on-secondary-container);
}

.msvc-shell .msvc-menu__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border-radius: var(--msvc-radius-sm);
  background: var(--msvc-primary-container);
  color: var(--msvc-on-primary-container);
}

.msvc-shell .msvc-menu__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1 1 auto;
  min-width: 0;
}

.msvc-shell .msvc-menu__label {
  display: block;
  font: var(--msvc-type-label);
}

.msvc-shell .msvc-menu__desc {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  font: var(--msvc-type-caption);
  color: var(--msvc-on-surface-variant);
}

.msvc-shell .msvc-menu__item.is-current .msvc-menu__desc {
  color: inherit;
  opacity: 0.85;
}

.msvc-shell .msvc-menu__check {
  flex: 0 0 auto;
  margin-left: auto;
  align-self: center;
  visibility: hidden;
}

.msvc-shell .msvc-menu__item.is-current .msvc-menu__check,
.msvc-shell .msvc-menu__item[aria-pressed="true"] .msvc-menu__check {
  visibility: visible;
}

.msvc-shell .msvc-menu__status {
  display: flex;
  align-items: center;
  gap: var(--msvc-space-2);
  padding: 10px;
  color: var(--msvc-on-surface-variant);
}

.msvc-shell .msvc-menu__status--error {
  color: var(--msvc-error);
}

.msvc-shell .msvc-menu__retry {
  margin: 0 10px 8px;
}

.msvc-shell .msvc-spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid var(--msvc-outline-variant);
  border-top-color: var(--msvc-primary);
  animation: msvc-spin 0.8s linear infinite;
}

@keyframes msvc-spin {
  to { transform: rotate(360deg); }
}

/* narrow screens: icon-only buttons, menus span the viewport */
@media (max-width: 640px) {
  .msvc-shell .msvc-shell__inner {
    padding: 0 var(--msvc-space-2);
    gap: 6px;
  }
  .msvc-shell .msvc-shell__label {
    display: none;
  }
  .msvc-shell .msvc-shell__caret {
    display: none;
  }
  .msvc-shell .msvc-btn {
    width: 34px;
    padding: 0;
  }
  .msvc-shell .msvc-shell__slot {
    padding-left: var(--msvc-space-2);
    margin-left: 0;
  }
  .msvc-shell .msvc-pop {
    position: static;
  }
  .msvc-shell .msvc-menu,
  .msvc-shell .msvc-menu--end {
    position: absolute;
    left: 8px;
    right: 8px;
    top: calc(100% + 6px);
    width: auto;
    max-width: none;
  }
}

@media (max-width: 359px) {
  .msvc-shell .msvc-shell__product-name {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .msvc-shell .msvc-menu {
    animation: none;
  }
  .msvc-shell .msvc-btn,
  .msvc-shell .msvc-shell__caret {
    transition: none;
  }
  .msvc-shell .msvc-spinner {
    animation-duration: 2.4s;
  }
}

@media (forced-colors: active) {
  .msvc-shell .msvc-btn,
  .msvc-shell .msvc-menu {
    border: 1px solid CanvasText;
  }
}