/* ─────────────────────────────────────────────────────────────────────────
   Magic UI × Bootstrap 5 bridge

   Bootstrap 5.3 fills the pieces Magic UI does not draw itself: tabs,
   accordions, off-canvas drawers, pagination, popovers, floating labels,
   input groups, list groups, progress. This file makes them wear Magic UI's
   tokens in every theme, accent and rail style, so the two never look like
   two products.

   Load order:
     vendor/bootstrap/bootstrap.min.css   (5.3.3, MIT)
     tokens/tokens.css
     css/magic-ui.css
     css/magic-ui-bootstrap.css               (this file)
     css/magic-ui-bento.css
   and js/magic-ui.js, which mirrors data-theme to Bootstrap's data-bs-theme.

   Rules: Magic UI components win where both exist (use .ms-btn, not .btn;
   Magic dialogs and toasts, not Bootstrap's). Bootstrap is for the pieces
   listed above, plus dropdowns: a Bootstrap .dropdown-menu is drawn exactly
   like a Magic UI menu, and .btn-group joins .ms-btn buttons into a split
   button. See docs-site/getting-started.html#bootstrap.
   ───────────────────────────────────────────────────────────────────────── */

/* ── Global Bootstrap variables → Magic UI tokens ─────────────────────── */
:root, :root[data-bs-theme] {
  --bs-body-font-family: var(--font-sans);
  --bs-body-font-size: var(--fs-base);
  --bs-body-font-weight: var(--fw-regular);
  --bs-body-line-height: var(--lh-base);
  --bs-body-color: var(--text);
  --bs-body-bg: var(--bg);
  --bs-emphasis-color: var(--text);
  --bs-heading-color: var(--text);
  --bs-secondary-color: var(--dim);
  --bs-tertiary-color: var(--faint);
  --bs-secondary-bg: var(--surface-2);
  --bs-tertiary-bg: var(--surface-2);
  --bs-border-color: var(--border-strong);
  --bs-border-color-translucent: var(--border);
  --bs-border-radius: var(--r-md);
  --bs-border-radius-sm: var(--r-sm);
  --bs-border-radius-lg: var(--r-xl);
  --bs-border-radius-xl: var(--r-3xl);
  --bs-border-radius-pill: var(--r-pill);
  --bs-box-shadow: var(--shadow);
  --bs-box-shadow-sm: var(--shadow-sm);
  --bs-focus-ring-width: 3px;
  --bs-focus-ring-color: var(--accent-soft);
  --bs-code-color: var(--accent-strong);
  --bs-highlight-bg: var(--warn-soft);
  --bs-form-valid-color: var(--success);
  --bs-form-valid-border-color: var(--success);
  --bs-form-invalid-color: var(--danger);
  --bs-form-invalid-border-color: var(--danger);
  --bs-body-color-rgb: var(--text-rgb);
  --bs-body-bg-rgb: var(--bg-rgb);
  --bs-emphasis-color-rgb: var(--text-rgb);

  /* Brand and semantic colours: Bootstrap's come from Magic UI's, in every
     theme and accent. Utilities (.text-primary, .bg-success…), alerts and
     badges follow. Subtle fills are the status-chip pastels, lightened. */
  --bs-primary: var(--accent);
  --bs-primary-rgb: var(--accent-rgb);
  --bs-primary-text-emphasis: var(--chip-accent-fg);
  --bs-primary-bg-subtle: var(--accent-subtle);
  --bs-primary-border-subtle: var(--chip-accent-bg);
  --bs-success: var(--success);
  --bs-success-rgb: var(--success-rgb);
  --bs-success-text-emphasis: var(--chip-success-fg);
  --bs-success-bg-subtle: color-mix(in srgb, var(--chip-success-bg) 45%, var(--surface));
  --bs-success-border-subtle: var(--chip-success-border);
  --bs-danger: var(--danger);
  --bs-danger-rgb: var(--danger-rgb);
  --bs-danger-text-emphasis: var(--chip-danger-fg);
  --bs-danger-bg-subtle: color-mix(in srgb, var(--chip-danger-bg) 45%, var(--surface));
  --bs-danger-border-subtle: var(--chip-danger-border);
  --bs-warning: var(--warn);
  --bs-warning-rgb: var(--warn-rgb);
  --bs-warning-text-emphasis: var(--chip-warning-fg);
  --bs-warning-bg-subtle: color-mix(in srgb, var(--chip-warning-bg) 45%, var(--surface));
  --bs-warning-border-subtle: var(--chip-warning-border);
  --bs-info: var(--info);
  --bs-info-rgb: var(--info-rgb);
  --bs-info-text-emphasis: var(--chip-info-fg);
  --bs-info-bg-subtle: color-mix(in srgb, var(--chip-info-bg) 45%, var(--surface));
  --bs-info-border-subtle: var(--chip-info-border);
  --bs-link-color: var(--accent);
  --bs-link-color-rgb: var(--accent-rgb);
  --bs-link-hover-color: var(--accent-strong);
  --bs-link-hover-color-rgb: var(--accent-rgb);
}
/* Bootstrap underlines links and tints them its own blue; Magic UI does not. */
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-strong); }
h1, h2, h3, h4, h5, h6 { color: var(--text); }

/* ── Forms: fields, selects, checks, floating labels, input groups ────── */
.form-control, .form-select {
  min-height: 40px; border: 1.5px solid var(--border-strong); border-radius: var(--r-lg);
  background-color: var(--bg); color: var(--text); font-size: var(--fs-lg);
}
.form-control::placeholder { color: var(--faint); }
.form-control:focus, .form-select:focus, .form-check-input:focus {
  border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); background-color: var(--bg); color: var(--text);
}
.form-control.is-invalid, .was-validated .form-control:invalid { border-color: var(--danger); }
.form-control.is-invalid:focus { box-shadow: 0 0 0 3px var(--danger-soft); }
.invalid-feedback { color: var(--danger); font-size: var(--fs-md); font-weight: var(--fw-bold); }
.valid-feedback { color: var(--success); font-size: var(--fs-md); font-weight: var(--fw-bold); }
.form-text { color: var(--dim); font-size: var(--fs-sm); }
.form-label { font-size: var(--fs-sm); font-weight: var(--fw-heavy); color: var(--dim); margin-bottom: 6px; }
.form-check-input { background-color: var(--bg); border: 1.5px solid var(--border-strong); }
.form-check-input:checked { background-color: var(--accent); border-color: var(--accent); }
/* Bootstrap tints an unchecked switch's knob its own blue on focus; keep the
   plain knob (the focus halo already shows focus). */
.form-switch .form-check-input:focus:not(:checked) { --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%280, 0, 0, 0.25%29'/%3e%3c/svg%3e"); }
[data-bs-theme="dark"] .form-switch .form-check-input:focus:not(:checked) { --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%28255, 255, 255, 0.25%29'/%3e%3c/svg%3e"); }
.form-range::-webkit-slider-thumb { background-color: var(--accent); }
.form-range::-webkit-slider-thumb:active { background-color: var(--accent-strong); }
.form-range::-moz-range-thumb { background-color: var(--accent); }
.form-range::-moz-range-thumb:active { background-color: var(--accent-strong); }
.form-range::-webkit-slider-runnable-track, .form-range::-moz-range-track { background-color: var(--surface-3); }
.form-range:focus::-webkit-slider-thumb { box-shadow: 0 0 0 3px var(--accent-soft); }
/* Floating labels keep the label visible inside the field: the fix for
   sign-in forms that relied on placeholders. */
.form-floating > .form-control, .form-floating > .form-select { height: 54px; min-height: 54px; }
.form-floating > label { color: var(--dim); font-weight: var(--fw-bold); }
.form-floating > .form-control:focus ~ label, .form-floating > .form-control:not(:placeholder-shown) ~ label { color: var(--dim); }
.form-floating > .form-control:focus ~ label::after, .form-floating > .form-control:not(:placeholder-shown) ~ label::after { background-color: transparent; }
.input-group-text { background: var(--surface-2); border: 1.5px solid var(--border-strong); color: var(--dim); font-weight: var(--fw-bold); border-radius: var(--r-lg); }

/* ── Buttons: prefer .ms-btn in product UI. When Bootstrap's .btn is used
      (third-party markup, quick prototypes) it wears the same colours.
      Bootstrap compiles these with literal hex, so each is restated. ───── */
.btn {
  --bs-btn-font-family: var(--font-sans); --bs-btn-font-size: var(--fs-base); --bs-btn-font-weight: var(--fw-bold);
  --bs-btn-padding-x: 13px; --bs-btn-padding-y: 7px; --bs-btn-border-radius: var(--r-md);
  --bs-btn-focus-box-shadow: 0 0 0 3px var(--accent-soft);
}
.btn-primary {
  --bs-btn-color: var(--on-accent); --bs-btn-bg: var(--accent); --bs-btn-border-color: var(--accent);
  --bs-btn-hover-color: var(--on-accent); --bs-btn-hover-bg: var(--accent-strong); --bs-btn-hover-border-color: var(--accent-strong);
  --bs-btn-active-color: var(--on-accent); --bs-btn-active-bg: var(--accent-strong); --bs-btn-active-border-color: var(--accent-strong);
  --bs-btn-disabled-color: var(--on-accent); --bs-btn-disabled-bg: var(--accent); --bs-btn-disabled-border-color: var(--accent);
  --bs-btn-focus-shadow-rgb: var(--accent-rgb);
}
.btn-outline-primary {
  --bs-btn-color: var(--accent-strong); --bs-btn-border-color: var(--accent);
  --bs-btn-hover-color: var(--on-accent); --bs-btn-hover-bg: var(--accent); --bs-btn-hover-border-color: var(--accent);
  --bs-btn-active-color: var(--on-accent); --bs-btn-active-bg: var(--accent-strong); --bs-btn-active-border-color: var(--accent-strong);
  --bs-btn-disabled-color: var(--accent); --bs-btn-disabled-border-color: var(--accent); --bs-btn-focus-shadow-rgb: var(--accent-rgb);
}
.btn-secondary, .btn-light, .btn-outline-secondary {
  --bs-btn-color: var(--text); --bs-btn-bg: var(--surface); --bs-btn-border-color: var(--border-strong);
  --bs-btn-hover-color: var(--text); --bs-btn-hover-bg: var(--surface-2); --bs-btn-hover-border-color: var(--border-strong);
  --bs-btn-active-color: var(--text); --bs-btn-active-bg: var(--surface-3); --bs-btn-active-border-color: var(--border-strong);
  --bs-btn-disabled-color: var(--faint); --bs-btn-disabled-bg: var(--surface); --bs-btn-disabled-border-color: var(--border);
  --bs-btn-focus-shadow-rgb: var(--accent-rgb);
}
/* Text on semantic solids is the page colour: white in light, near-black in dark. */
.btn-danger {
  --bs-btn-color: var(--bg); --bs-btn-bg: var(--danger); --bs-btn-border-color: var(--danger);
  --bs-btn-hover-color: var(--bg); --bs-btn-hover-bg: var(--danger); --bs-btn-hover-border-color: var(--danger);
  --bs-btn-active-color: var(--bg); --bs-btn-active-bg: var(--danger); --bs-btn-active-border-color: var(--danger);
  --bs-btn-focus-shadow-rgb: var(--danger-rgb);
}
.btn-outline-danger {
  --bs-btn-color: var(--danger); --bs-btn-border-color: color-mix(in srgb, var(--danger) 40%, transparent);
  --bs-btn-hover-color: var(--danger); --bs-btn-hover-bg: var(--danger-soft); --bs-btn-hover-border-color: var(--danger);
  --bs-btn-active-color: var(--danger); --bs-btn-active-bg: var(--danger-soft); --bs-btn-active-border-color: var(--danger);
  --bs-btn-focus-shadow-rgb: var(--danger-rgb);
}
.btn-success {
  --bs-btn-color: var(--bg); --bs-btn-bg: var(--success); --bs-btn-border-color: var(--success);
  --bs-btn-hover-color: var(--bg); --bs-btn-hover-bg: var(--success); --bs-btn-hover-border-color: var(--success);
  --bs-btn-active-color: var(--bg); --bs-btn-active-bg: var(--success); --bs-btn-active-border-color: var(--success);
  --bs-btn-focus-shadow-rgb: var(--success-rgb);
}
.btn-link { --bs-btn-color: var(--accent); --bs-btn-hover-color: var(--accent-strong); --bs-btn-active-color: var(--accent-strong); }

/* ── Cards, tables, modals, tooltips: the soft bento look ─────────────── */
.card {
  --bs-card-bg: var(--surface); --bs-card-color: var(--text); --bs-card-border-color: var(--border);
  --bs-card-border-radius: var(--radius-card); --bs-card-inner-border-radius: calc(var(--radius-card) - 1px);
  --bs-card-spacer-x: var(--card-pad); --bs-card-spacer-y: var(--card-pad); --bs-card-cap-padding-x: var(--card-pad);
  --bs-card-cap-bg: var(--surface-2); --bs-card-title-color: var(--text); --bs-card-subtitle-color: var(--dim);
  box-shadow: var(--elevation-card);
}
.table {
  --bs-table-color: var(--text); --bs-table-bg: transparent; --bs-table-border-color: var(--border);
  --bs-table-striped-color: var(--text); --bs-table-striped-bg: var(--surface-2);
  --bs-table-hover-color: var(--text); --bs-table-hover-bg: var(--surface-2);
  --bs-table-active-color: var(--text); --bs-table-active-bg: var(--accent-soft);
  font-size: var(--fs-base);
}
.table > thead th { background: var(--surface-2); color: var(--dim); font-weight: var(--fw-bold); }
.modal {
  --bs-modal-bg: var(--surface); --bs-modal-color: var(--text); --bs-modal-border-color: var(--border);
  --bs-modal-border-radius: var(--r-dialog); --bs-modal-inner-border-radius: calc(var(--r-dialog) - 1px);
  --bs-modal-box-shadow: var(--shadow); --bs-modal-header-border-color: var(--border); --bs-modal-footer-border-color: var(--border);
  --bs-modal-padding: 22px; --bs-modal-header-padding: 18px 22px; --bs-modal-title-line-height: 1.3;
}
.modal-title { font-size: var(--fs-2xl); font-weight: var(--fw-heavy); }
.modal-backdrop { --bs-backdrop-bg: var(--overlay); --bs-backdrop-opacity: 1; }
.tooltip { --bs-tooltip-font-size: 11px; --bs-tooltip-border-radius: 7px; --bs-tooltip-padding-x: 8px; --bs-tooltip-padding-y: 5px; font-family: var(--font-sans); font-weight: var(--fw-bold); }
.nav-pills { --bs-nav-pills-link-active-bg: var(--accent); --bs-nav-pills-link-active-color: var(--on-accent); --bs-nav-pills-border-radius: var(--r-md); }

/* ── Tabs: underline style, the same as Magic UI's inspector tabs ─────── */
.nav-underline {
  --bs-nav-underline-gap: 18px; --bs-nav-underline-border-width: 2px; --bs-nav-underline-link-active-color: var(--text);
  border-bottom: 1px solid var(--border);
}
.nav-underline .nav-link { color: var(--dim); font-size: var(--fs-base); font-weight: var(--fw-heavy); padding: 12px 0 11px; margin-bottom: -1px; }
.nav-underline .nav-link:hover, .nav-underline .nav-link:focus { color: var(--text); border-bottom-color: var(--border-strong); }
.nav-underline .nav-link.active, .nav-underline .show > .nav-link { color: var(--text); border-bottom-color: var(--accent); }
.nav-tabs { --bs-nav-tabs-border-color: var(--border); --bs-nav-tabs-link-active-bg: var(--surface); --bs-nav-tabs-link-active-color: var(--text); --bs-nav-tabs-link-active-border-color: var(--border) var(--border) var(--surface); --bs-nav-tabs-link-hover-border-color: var(--border); --bs-nav-tabs-border-radius: var(--r-lg); }
.nav-link { --bs-nav-link-color: var(--dim); --bs-nav-link-hover-color: var(--text); }
.nav-link:focus-visible { box-shadow: none; outline: 2px solid var(--accent); outline-offset: 2px; }

/* ── Accordion: settings groups, long property lists ──────────────────── */
.accordion {
  --bs-accordion-bg: var(--surface); --bs-accordion-color: var(--text); --bs-accordion-border-color: var(--border);
  --bs-accordion-border-radius: var(--r-3xl); --bs-accordion-inner-border-radius: calc(var(--r-3xl) - 1px);
  --bs-accordion-btn-color: var(--text); --bs-accordion-btn-bg: var(--surface); --bs-accordion-active-color: var(--text);
  --bs-accordion-active-bg: var(--surface-2); --bs-accordion-btn-focus-box-shadow: inset 0 0 0 2px var(--accent);
  --bs-accordion-btn-padding-x: 16px; --bs-accordion-btn-padding-y: 14px; --bs-accordion-body-padding-x: 16px; --bs-accordion-body-padding-y: 14px;
}
/* The accordion's header wraps its button; Bootstrap's responsive h1–h6
   sizing would make that wrapper a 28px heading. */
.accordion-header { margin: 0; font-size: inherit; line-height: inherit; }
.accordion-button { font-size: var(--fs-lg); font-weight: var(--fw-heavy); }
/* The chevron is drawn in the text colour, so it reads in both themes. */
.accordion-button::after, .accordion-button:not(.collapsed)::after {
  background-image: none; background-color: var(--dim);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
}
.accordion-body { font-size: var(--fs-base); color: var(--text); }

/* ── Off-canvas: the rail and filters on phones ───────────────────────── */
.offcanvas {
  --bs-offcanvas-bg: var(--surface); --bs-offcanvas-color: var(--text); --bs-offcanvas-border-color: var(--border);
  --bs-offcanvas-width: 300px; --bs-offcanvas-padding-x: 18px; --bs-offcanvas-padding-y: 16px; --bs-offcanvas-box-shadow: var(--shadow);
}
.offcanvas.is-rail { --bs-offcanvas-bg: var(--rail-bg); --bs-offcanvas-color: var(--rail-fg); --bs-offcanvas-width: 260px; }
.offcanvas-title { font-size: var(--fs-2xl); font-weight: var(--fw-heavy); }
.offcanvas-backdrop { background: var(--overlay); }
.offcanvas-backdrop.show { opacity: 1; }

/* ── Pagination: every long table ends with one ───────────────────────── */
.pagination {
  --bs-pagination-color: var(--text); --bs-pagination-bg: var(--surface); --bs-pagination-border-color: var(--border);
  --bs-pagination-hover-color: var(--text); --bs-pagination-hover-bg: var(--surface-2); --bs-pagination-hover-border-color: var(--border-strong);
  --bs-pagination-focus-color: var(--text); --bs-pagination-focus-bg: var(--surface-2); --bs-pagination-focus-box-shadow: 0 0 0 3px var(--accent-soft);
  --bs-pagination-active-color: var(--on-accent); --bs-pagination-active-bg: var(--accent); --bs-pagination-active-border-color: var(--accent);
  --bs-pagination-disabled-color: var(--faint); --bs-pagination-disabled-bg: var(--surface); --bs-pagination-disabled-border-color: var(--border);
  --bs-pagination-border-radius: var(--r-md); --bs-pagination-font-size: var(--fs-base); --bs-pagination-padding-x: 11px; --bs-pagination-padding-y: 5px;
  margin: 0; gap: 4px;
}
.pagination .page-link { border-radius: var(--r-md) !important; font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; min-width: 34px; text-align: center; }

/* ── Popover: help that needs more than a tooltip ─────────────────────── */
.popover {
  --bs-popover-bg: var(--surface); --bs-popover-border-color: var(--border); --bs-popover-border-radius: var(--r-xl);
  --bs-popover-box-shadow: var(--shadow); --bs-popover-header-bg: var(--surface); --bs-popover-header-color: var(--text);
  --bs-popover-body-color: var(--dim); --bs-popover-font-size: var(--fs-md); --bs-popover-header-font-size: var(--fs-base);
  --bs-popover-max-width: 300px; --bs-popover-body-padding-x: 14px; --bs-popover-body-padding-y: 12px; --bs-popover-header-padding-x: 14px;
  font-family: var(--font-sans);
}
.popover-header { font-weight: var(--fw-heavy); border-bottom-color: var(--border); }
.popover-body { line-height: var(--lh-base); }

/* ── Progress ─────────────────────────────────────────────────────────── */
.progress, .progress-stacked {
  --bs-progress-height: 8px; --bs-progress-bg: var(--surface-3); --bs-progress-border-radius: 6px;
  --bs-progress-bar-bg: var(--accent); --bs-progress-bar-color: var(--on-accent); --bs-progress-font-size: var(--fs-xs);
}
.progress-bar.is-warn { background-color: var(--warn); } .progress-bar.is-crit { background-color: var(--danger); }

/* ── List group: notification centres, activity feeds, settings menus ── */
.list-group {
  --bs-list-group-color: var(--text); --bs-list-group-bg: var(--surface); --bs-list-group-border-color: var(--border);
  --bs-list-group-border-radius: var(--r-3xl); --bs-list-group-item-padding-x: 14px; --bs-list-group-item-padding-y: 11px;
  --bs-list-group-action-color: var(--text); --bs-list-group-action-hover-color: var(--text); --bs-list-group-action-hover-bg: var(--surface-2);
  --bs-list-group-action-active-color: var(--text); --bs-list-group-action-active-bg: var(--surface-3);
  --bs-list-group-active-color: var(--text); --bs-list-group-active-bg: var(--accent-soft); --bs-list-group-active-border-color: var(--border);
  --bs-list-group-disabled-color: var(--faint); --bs-list-group-disabled-bg: var(--surface);
}
/* Notification list (.is-notifications): an icon, the line and when it
   happened. Unread is a dot in a slot every item reserves at its end, so
   marking something read moves nothing; the item also says "Unread" to
   screen readers (.ms-sr text in the markup). */
.list-group.is-notifications .list-group-item { display: flex; align-items: flex-start; gap: 12px; }
.list-group.is-notifications .list-group-item::after { content: ""; flex: none; width: 8px; height: 8px; margin: 7px 0 0 auto; border-radius: 50%; }
.list-group.is-notifications .list-group-item.is-unread::after { background: var(--accent); }
.list-group.is-notifications .ms-type-icon { width: 30px; height: 30px; border-radius: 9px; }
.ms-notif-text { display: grid; gap: 2px; min-width: 0; font-size: var(--fs-lg); line-height: var(--lh-tight); }
.ms-notif-text small { color: var(--dim); font-size: var(--fs-sm); }

/* ── Badges and placeholders ──────────────────────────────────────────── */
.badge { font-weight: var(--fw-heavy); font-size: var(--fs-xs); border-radius: var(--r-pill); padding: .35em .6em; }
.badge.text-bg-accent { background: var(--accent) !important; color: var(--on-accent) !important; }
.placeholder { background-color: var(--surface-3); opacity: 1; border-radius: 6px; }

/* ── Dropdowns: Bootstrap's dropdown JS, Magic UI's menu look ─────────── */
.dropdown-menu {
  --bs-dropdown-zindex: var(--z-floating-menu); --bs-dropdown-min-width: 210px; --bs-dropdown-font-size: var(--fs-base);
  --bs-dropdown-bg: var(--surface); --bs-dropdown-color: var(--text); --bs-dropdown-border-color: var(--border);
  --bs-dropdown-border-radius: var(--r-xl); --bs-dropdown-box-shadow: var(--shadow); --bs-dropdown-padding-x: 6px; --bs-dropdown-padding-y: 6px;
  --bs-dropdown-spacer: 6px; --bs-dropdown-divider-bg: var(--border); --bs-dropdown-divider-margin-y: 4px;
  --bs-dropdown-link-color: var(--text); --bs-dropdown-link-hover-color: var(--text); --bs-dropdown-link-hover-bg: var(--surface-2);
  --bs-dropdown-link-active-color: var(--text); --bs-dropdown-link-active-bg: var(--surface-2); --bs-dropdown-link-disabled-color: var(--faint);
  --bs-dropdown-item-padding-x: 11px; --bs-dropdown-item-padding-y: 8px; --bs-dropdown-item-border-radius: var(--r-sm);
  --bs-dropdown-header-color: var(--faint); --bs-dropdown-header-padding-x: 11px; --bs-dropdown-header-padding-y: 6px;
  box-shadow: var(--bs-dropdown-box-shadow); font-family: var(--font-sans);
}
/* Fade only: Popper positions the menu with transform, so animating
   transform here would pin it over its button. */
.dropdown-menu.show { animation: ms-fade .14s ease both; }
.dropdown-item { display: flex; align-items: center; gap: 10px; min-height: 36px; font-weight: var(--fw-medium); }
.dropdown-item > svg { flex: none; color: var(--dim); }
.dropdown-item:focus-visible { outline: none; background: var(--surface-2); }
.dropdown-item.is-danger, .dropdown-item.is-danger > svg { color: var(--danger); }
.dropdown-item.disabled, .dropdown-item:disabled { color: var(--faint); }
/* A choice in a menu (theme, density): the chosen one is pressed and carries a check. */
.dropdown-item[aria-pressed] > .ms-check-slot { width: 15px; flex: none; display: flex; color: var(--accent); }
.dropdown-item[aria-pressed="false"] > .ms-check-slot > svg { visibility: hidden; }
/* A reason under an item that can't be used right now (principle 6). */
.dropdown-item .ms-mi small { font-size: var(--fs-xs); color: var(--dim); font-weight: var(--fw-medium); }
.dropdown-header { font-size: var(--fs-xs); font-weight: var(--fw-heavy); letter-spacing: var(--tracking-label); text-transform: uppercase; }
/* Magic UI draws its own chevron icon; Bootstrap's triangle would double it. */
.ms-btn.dropdown-toggle::after, .ms-icon-btn.dropdown-toggle::after, .ms-avatar.dropdown-toggle::after { display: none; }
/* Split button: .btn-group around two .ms-btn (the menu may follow them).
   Only the join between the two buttons is squared; the outer corners stay round. */
.btn-group > .ms-btn:has(+ .ms-btn) { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.btn-group > .ms-btn + .ms-btn { margin-left: 1px; border-top-left-radius: 0; border-bottom-left-radius: 0; padding-inline: 9px; }

/* ── Close button: Bootstrap's own × follows the theme through data-bs-theme ─ */
.btn-close:focus { box-shadow: 0 0 0 3px var(--accent-soft); }

/* ── Carousel: Bootstrap's, wearing Magic UI ───────────────────────────────
   The sliding hero. Bootstrap does the sliding, the touch and the interval;
   the kit gives it the card's corners, controls you can actually see on a
   photograph, and indicators that are buttons rather than hairlines. */
.ms-carousel { border-radius: var(--radius-card); overflow: hidden; background: var(--surface-2); }
/* A little longer and gentler than Bootstrap's .6s ease-in-out: at hero size
   the slide is a big movement, and a fast one reads as a cut. */
.ms-carousel .carousel-item { transition: transform .62s var(--ease-out); }
/* Crossfade instead of sliding, for slides that are pictures rather than
   panels — Bootstrap's own .carousel-fade, given the same timing. */
.ms-carousel.carousel-fade .carousel-item { transition: opacity .5s var(--ease-out); }
/* Reduced motion: Bootstrap already drops the transition, but the fade
   variant needs saying too, so neither one animates. */
@media (prefers-reduced-motion: reduce) {
  /* Our .ms-carousel rules outrank Bootstrap's own reduced-motion rule, so it
     has to be said again here or a manual press still animates. */
  .ms-carousel .carousel-item,
  .ms-carousel.carousel-fade .carousel-item,
  .ms-carousel .carousel-item.active,
  .ms-carousel .carousel-item-next,
  .ms-carousel .carousel-item-prev { transition: none !important; }
}
.ms-carousel .carousel-control-prev, .ms-carousel .carousel-control-next {
  width: 64px; opacity: 1; color: var(--on-accent);
}
.ms-carousel .carousel-control-prev-icon, .ms-carousel .carousel-control-next-icon {
  width: 38px; height: 38px; border-radius: 50%; background-size: 16px 16px;
  background-color: rgba(0, 0, 0, .42); backdrop-filter: blur(3px);
}
.ms-carousel .carousel-control-prev:hover .carousel-control-prev-icon,
.ms-carousel .carousel-control-next:hover .carousel-control-next-icon { background-color: rgba(0, 0, 0, .62); }
.ms-carousel .carousel-control-prev:focus-visible .carousel-control-prev-icon,
.ms-carousel .carousel-control-next:focus-visible .carousel-control-next-icon { box-shadow: 0 0 0 3px var(--accent); }
.ms-carousel .carousel-indicators { margin-bottom: 12px; gap: 6px; }
.ms-carousel .carousel-indicators [data-bs-target] {
  width: 8px; height: 8px; border-radius: 50%; border: 0; margin: 0;
  background-color: rgba(255, 255, 255, .55); opacity: 1; transition: width .2s var(--ease-out);
}
.ms-carousel .carousel-indicators .active { width: 22px; border-radius: 4px; background-color: #fff; }
.ms-carousel .carousel-indicators [data-bs-target]:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.ms-carousel .carousel-caption {
  right: 8%; left: 8%; bottom: 34px; text-align: left;
  text-shadow: 0 1px 14px rgba(0, 0, 0, .55);
}
.ms-carousel .carousel-caption h3 { font-size: clamp(20px, 2.6vw, 30px); font-weight: var(--fw-heavy); letter-spacing: var(--tracking-title); }
.ms-carousel .carousel-caption p { font-size: var(--fs-xl); max-width: 54ch; }
/* Dark mode: Bootstrap ships [data-bs-theme=dark] rules for the indicators
   and the control icons at a higher specificity than ours, and the kit mirrors
   data-theme onto data-bs-theme — so in dark the pills went black on top of a
   photograph and the controls' dark scrim inverted to light. A control over a
   picture does not want a theme at all: the picture is the ground. */
[data-bs-theme="dark"] .ms-carousel .carousel-indicators [data-bs-target] { background-color: rgba(255, 255, 255, .55); }
[data-bs-theme="dark"] .ms-carousel .carousel-indicators .active { background-color: #fff; }
[data-bs-theme="dark"] .ms-carousel .carousel-control-prev-icon,
[data-bs-theme="dark"] .ms-carousel .carousel-control-next-icon { filter: none; }

/* A slide that is a hero rather than a photograph: no overlay needed. */
.ms-carousel .ms-hero { border-radius: 0; border: 0; min-height: 100%; }
/* The play/pause control. An auto-advancing carousel with no way to stop it
   fails WCAG 2.2.2, so the control is part of the component, not an extra. */
.ms-carousel-play {
  position: absolute; right: 14px; top: 14px; z-index: 3;
  gap: 5px; background: rgba(0, 0, 0, .42); border-color: rgba(255, 255, 255, .28);
  color: #fff; backdrop-filter: blur(3px);
}
.ms-carousel-play:hover { background: rgba(0, 0, 0, .62); color: #fff; }
.ms-carousel-play:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* ── Nav tree: Bootstrap's collapse, wearing Magic UI ──────────────────────
   A vertical navigation of groups that open and close. Bootstrap does the
   collapsing — data-bs-toggle="collapse", its own .collapse element, its
   transition — and the kit supplies the look: flush, borderless, no fills, a
   chevron that turns, and children indented under their parent.

   Every colour here comes from the theme. Nothing is hardcoded for light or
   dark, and nothing assumes a background: the tree takes `currentColor` and
   the surrounding text tokens, so it sits in a rail, a card or a bare column
   and looks like it belongs in all three.

   The spacing is tokens rather than Bootstrap's py-2 / ps-4 utilities. Those
   are fixed pixels; these follow --density, so the same markup is comfortable
   on an overview and compact in a working screen. */
.ms-navtree { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.ms-navtree ul { list-style: none; margin: 0; padding: 0; }

/* The parent: the name on the left, the chevron hard right. */
.ms-navtree-parent {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: var(--navtree-pad, 8px) 10px;
  border: 0; border-radius: var(--r-lg); background: transparent;
  color: inherit; font: inherit; font-size: var(--fs-lg); font-weight: var(--fw-heavy);
  text-align: left; cursor: pointer; text-decoration: none; min-width: 0;
}
.ms-navtree-parent > span:first-child { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ms-navtree-parent:hover { background: color-mix(in srgb, currentColor 8%, transparent); }
.ms-navtree-parent:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

/* The chevron points right when closed and turns to point down when open.
   It follows aria-expanded, which Bootstrap maintains — so the mark and the
   state can never disagree, however the section was opened. */
.ms-navtree-chev { flex: none; display: grid; place-items: center; opacity: .55; transition: transform .2s var(--ease-out), opacity .2s ease; }
.ms-navtree-parent[aria-expanded="true"] .ms-navtree-chev { transform: rotate(90deg); opacity: .9; }
.ms-navtree-parent:hover .ms-navtree-chev { opacity: .9; }

/* The children: indented under the parent, and lighter, because the group's
   name is the heavier thing. */
.ms-navtree-children > li > a {
  display: block; padding: var(--navtree-pad, 8px) 10px var(--navtree-pad, 8px) 28px;
  border-radius: var(--r-lg); color: inherit; opacity: .78;
  font-size: var(--fs-lg); font-weight: var(--fw-medium); text-decoration: none;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ms-navtree-children > li > a:hover { background: color-mix(in srgb, currentColor 8%, transparent); opacity: 1; }
.ms-navtree-children > li > a:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
/* The current page is the one thing that gets a fill — and it is the accent's,
   so it reads as chosen rather than merely hovered. */
.ms-navtree-children > li > a[aria-current="page"] {
  background: var(--accent-soft); color: var(--accent-strong); opacity: 1; font-weight: var(--fw-bold);
}
/* ...but only on a surface. In a rail the ground is the rail's own — and on
   [data-rail="colored"] that ground IS the accent, so a 10% accent wash
   vanishes into it and --accent-strong lands near 1.6:1. The rail already
   ships the pair that is built for it, and every other rail item uses it, so
   the tree uses it too: 7.4:1 light, 9.1:1 dark, every rail style. */
.ms-rail .ms-navtree-children > li > a[aria-current="page"] {
  background: var(--rail-active-bg); color: var(--rail-active-fg);
}

/* A third level, for the rare tree that needs one. Past this, the navigation
   is the problem, not the indent. */
.ms-navtree-children .ms-navtree-children > li > a { padding-left: 46px; }

/* Compact density tightens it, the way every other list in the kit does. */
[data-density="compact"] .ms-navtree { --navtree-pad: 5px; }
@media (prefers-reduced-motion: reduce) { .ms-navtree-chev { transition: none; } }