/* ============================================================================
   components.css: the component library.
   Every interactive component carries its full state set. See DESIGN_RULES.md
   section 5. Requires tokens.css and base.css.
   ========================================================================== */

/* ------------------------------------------------------------------ icons */

.mb-icon {
  inline-size: 1.25em;
  block-size: 1.25em;
  flex: none;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.mb-icon--lg { inline-size: 1.75em; block-size: 1.75em; }

/* Only navigational symbols mirror. Anatomy, rhythm traces, catheters and
   devices never do. DESIGN_RULES.md section 6. */
[dir="rtl"] .mb-icon--logical { transform: scaleX(-1); }

/* ---------------------------------------------------------------- buttons */

.mb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--mb-space-2);
  min-block-size: var(--mb-target-min);
  padding: var(--mb-space-3) var(--mb-space-6);
  border: var(--mb-border-strong) solid transparent;
  border-radius: var(--mb-radius-md);
  font-size: var(--mb-text-body);
  font-weight: var(--mb-weight-medium);
  line-height: var(--mb-leading-compact);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  /* Labels wrap; the button grows. Never a fixed height. */
  block-size: auto;
  transition: background var(--mb-motion-fast) var(--mb-ease-standard),
              border-color var(--mb-motion-fast) var(--mb-ease-standard),
              color var(--mb-motion-fast) var(--mb-ease-standard);
}

.mb-btn--primary {
  background: var(--mb-atlantic-700);
  border-color: var(--mb-atlantic-700);
  color: var(--mb-white);
}
.mb-btn--primary:visited { color: var(--mb-white); }
.mb-btn--primary:hover { background: var(--mb-atlantic-800); border-color: var(--mb-atlantic-800); color: var(--mb-white); }
.mb-btn--primary:active { background: var(--mb-atlantic-900); border-color: var(--mb-atlantic-900); }

.mb-btn--secondary {
  background: transparent;
  border-color: var(--mb-atlantic-700);
  color: var(--mb-atlantic-800);
}
.mb-btn--secondary:visited { color: var(--mb-atlantic-800); }
.mb-btn--secondary:hover { background: var(--mb-atlantic-50); color: var(--mb-atlantic-900); }

/* Signal. Oxide. One genuinely important clinical or conversion signal per
   view. Never used as a second primary. */
.mb-btn--signal {
  background: var(--mb-oxide-600);
  border-color: var(--mb-oxide-600);
  color: var(--mb-white);
}
.mb-btn--signal:visited { color: var(--mb-white); }
.mb-btn--signal:hover { background: var(--mb-oxide-700); border-color: var(--mb-oxide-700); color: var(--mb-white); }

.mb-btn:disabled,
.mb-btn[aria-disabled="true"] {
  background: var(--mb-graphite-100);
  border-color: var(--mb-graphite-200);
  color: var(--mb-disabled);
  cursor: not-allowed;
  pointer-events: none;
}

/* Loading. The spinner is decorative; the state is announced in text via
   the accompanying live region, never by the animation alone. */
.mb-btn[data-loading="true"] { cursor: progress; pointer-events: none; }
.mb-btn[data-loading="true"] .mb-btn__spinner {
  display: inline-block;
  inline-size: 1em;
  block-size: 1em;
  border: 2px solid currentColor;
  border-block-start-color: transparent;
  border-radius: var(--mb-radius-round);
  animation: mb-spin 700ms linear infinite;
}
.mb-btn__spinner { display: none; }
@keyframes mb-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .mb-btn[data-loading="true"] .mb-btn__spinner { animation: none; opacity: 0.6; }
}

.mb-btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mb-space-3);
  margin-block-start: var(--mb-space-6);
}

.mb-textlink {
  display: inline-flex;
  align-items: center;
  gap: var(--mb-space-2);
  min-block-size: var(--mb-target-min);
  font-weight: var(--mb-weight-medium);
}

/* ------------------------------------------------------------------ cards */

.mb-card {
  display: flex;
  flex-direction: column;
  gap: var(--mb-space-2);
  /* Grid children must be able to shrink, and must never be clipped to an
     equal height. Content decides the height. */
  min-inline-size: 0;
}

a.mb-card {
  text-decoration: none;
  color: inherit;
  transition: border-color var(--mb-motion-fast) var(--mb-ease-standard),
              box-shadow var(--mb-motion-fast) var(--mb-ease-standard);
}
a.mb-card:visited { color: inherit; }
a.mb-card:hover {
  border-color: var(--mb-atlantic-400);
  box-shadow: var(--mb-shadow-md);
}
a.mb-card:hover .mb-card__title { color: var(--mb-atlantic-800); text-decoration: underline; }

.mb-card__title {
  font-size: var(--mb-text-h4);
  font-weight: var(--mb-weight-semibold);
  color: var(--mb-graphite-900);
}
.mb-card__sub {
  font-size: var(--mb-text-body-sm);
  color: var(--mb-graphite-600);
}
.mb-card__go {
  margin-block-start: auto;
  padding-block-start: var(--mb-space-3);
  color: var(--mb-atlantic-700);
  font-size: var(--mb-text-body-sm);
  font-weight: var(--mb-weight-medium);
}

.mb-card.is-selected {
  border-color: var(--mb-atlantic-600);
  border-inline-start: var(--mb-edge-clinical) solid var(--mb-atlantic-600);
}

/* ----------------------------------------------------------------- states */

/* The five-part recipe: icon, heading, text, logical-start edge, tint.
   All five are required. Colour alone never carries the meaning. */
.mb-state {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--mb-space-2) var(--mb-space-3);
  align-items: start;
}
.mb-state__icon { color: var(--mb-state-color); grid-row: span 2; }
.mb-state__title {
  font-size: var(--mb-text-body);
  font-weight: var(--mb-weight-semibold);
  color: var(--mb-graphite-900);
}
.mb-state__body {
  font-size: var(--mb-text-body-sm);
  color: var(--mb-graphite-700);
  max-inline-size: var(--mb-reading-max);
}

/* ------------------------------------------------------------------ forms */

.mb-form { display: grid; gap: var(--mb-space-6); max-inline-size: var(--mb-reading-max); }

.mb-field { display: grid; gap: var(--mb-space-2); }

.mb-label {
  font-size: var(--mb-text-label);
  font-weight: var(--mb-weight-semibold);
  color: var(--mb-graphite-800);
}
/* Required is stated in text, not by a bare asterisk. */
.mb-label__required {
  font-weight: var(--mb-weight-regular);
  color: var(--mb-graphite-600);
}

/* Instructions come before the input, not after it. */
.mb-hint {
  font-size: var(--mb-text-body-sm);
  color: var(--mb-graphite-600);
}

.mb-input,
.mb-textarea,
.mb-select {
  inline-size: 100%;
  min-block-size: var(--mb-target-min);
  padding: var(--mb-space-3);
  border: var(--mb-border-thin) solid var(--mb-border-control);
  border-radius: var(--mb-radius-md);
  background: var(--mb-white);
  color: var(--mb-graphite-900);
  transition: border-color var(--mb-motion-fast) var(--mb-ease-standard);
}
.mb-textarea { min-block-size: 8rem; resize: vertical; }

.mb-input:hover,
.mb-textarea:hover,
.mb-select:hover { border-color: var(--mb-graphite-500); }

.mb-input:disabled,
.mb-textarea:disabled,
.mb-select:disabled {
  background: var(--mb-graphite-50);
  color: var(--mb-disabled);
  border-color: var(--mb-graphite-200);
  cursor: not-allowed;
}

/* Invalid: edge + tint + icon + text. Never colour alone. */
.mb-input[aria-invalid="true"],
.mb-textarea[aria-invalid="true"],
.mb-select[aria-invalid="true"] {
  border-color: var(--mb-error);
  border-inline-start-width: var(--mb-edge-clinical);
  background: #fdf0ef;
}

.mb-error {
  display: flex;
  align-items: start;
  gap: var(--mb-space-2);
  font-size: var(--mb-text-body-sm);
  font-weight: var(--mb-weight-medium);
  color: var(--mb-error);
}

/* The whole label is the target, not just the box, so the row carries the
   full target height. */
.mb-checkbox {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--mb-space-3);
  align-items: center;
  min-block-size: var(--mb-target-min);
  padding-block: var(--mb-space-2);
  font-size: var(--mb-text-body-sm);
  cursor: pointer;
}
.mb-checkbox input {
  inline-size: 1.75rem;
  block-size: 1.75rem;
  accent-color: var(--mb-atlantic-700);
}

/* Error summary sits at the top of the form and links to each invalid field. */
.mb-errorsummary a {
  display: inline-flex;
  align-items: center;
  min-block-size: var(--mb-target-min);
  color: var(--mb-error);
  font-weight: var(--mb-weight-medium);
}
.mb-errorsummary ul { margin-block-start: var(--mb-space-2); padding-inline-start: var(--mb-space-5); }

/* -------------------------------------------------------- patient pathway */

.mb-pathway { list-style: none; padding: 0; display: grid; gap: var(--mb-space-4); }

.mb-pathway__step {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--mb-space-4);
  align-items: start;
  padding: var(--mb-space-4);
  border: var(--mb-border-thin) solid var(--mb-graphite-200);
  border-radius: var(--mb-radius-lg);
  background: var(--mb-white);
}

.mb-pathway__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 2.25rem;
  block-size: 2.25rem;
  border: var(--mb-border-strong) solid var(--mb-graphite-300);
  border-radius: var(--mb-radius-round);
  font-weight: var(--mb-weight-semibold);
  font-variant-numeric: tabular-nums;
  color: var(--mb-graphite-700);
}

.mb-pathway__label { font-weight: var(--mb-weight-semibold); }
.mb-pathway__body { font-size: var(--mb-text-body-sm); color: var(--mb-graphite-700); }

/* Status carries a text badge as well as colour and shape. */
.mb-pathway__status {
  font-size: var(--mb-text-caption);
  font-weight: var(--mb-weight-medium);
  color: var(--mb-graphite-600);
}
.mb-pathway__step[data-status="complete"] .mb-pathway__num {
  background: var(--mb-atlantic-700);
  border-color: var(--mb-atlantic-700);
  color: var(--mb-white);
}
.mb-pathway__step[data-status="current"] {
  border-inline-start: var(--mb-edge-clinical) solid var(--mb-oxide-500);
}
.mb-pathway__step[data-status="current"] .mb-pathway__num {
  border-color: var(--mb-oxide-500);
  color: var(--mb-oxide-700);
}
.mb-pathway__step[data-status="current"] .mb-pathway__status { color: var(--mb-oxide-700); }

/* ----------------------------------------------------------------- tables */

.mb-tablewrap { overflow-x: auto; }

.mb-table {
  inline-size: 100%;
  border-collapse: collapse;
  font-size: var(--mb-text-body-sm);
}
.mb-table caption {
  text-align: start;
  font-weight: var(--mb-weight-semibold);
  margin-block-end: var(--mb-space-3);
}
.mb-table :is(th, td) {
  padding: var(--mb-space-3);
  text-align: start;
  border-block-end: var(--mb-border-thin) solid var(--mb-graphite-200);
  vertical-align: top;
}
.mb-table thead th {
  border-block-end: var(--mb-border-strong) solid var(--mb-graphite-400);
  font-weight: var(--mb-weight-semibold);
}
.mb-table td[data-numeric] { font-variant-numeric: tabular-nums; }

/* Under 48rem the table reflows to record cards. Headers are re-attached via
   data-label so no value loses its meaning. */
@media (max-width: 47.99rem) {
  .mb-table--stack thead { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); }
  .mb-table--stack tr {
    display: grid;
    gap: var(--mb-space-1);
    padding: var(--mb-space-4);
    margin-block-end: var(--mb-space-4);
    border: var(--mb-border-thin) solid var(--mb-graphite-200);
    border-radius: var(--mb-radius-lg);
    background: var(--mb-white);
  }
  .mb-table--stack td { border: 0; padding: 0; }
  .mb-table--stack td::before {
    content: attr(data-label);
    display: block;
    font-size: var(--mb-text-caption);
    font-weight: var(--mb-weight-semibold);
    color: var(--mb-graphite-600);
  }
}

/* -------------------------------------------------------------- accordion */

.mb-accordion {
  border: var(--mb-border-thin) solid var(--mb-graphite-200);
  border-radius: var(--mb-radius-lg);
  background: var(--mb-white);
}
.mb-accordion + .mb-accordion { margin-block-start: var(--mb-space-3); }

.mb-accordion > summary {
  display: flex;
  align-items: center;
  gap: var(--mb-space-3);
  min-block-size: var(--mb-target-min);
  padding: var(--mb-space-4);
  font-weight: var(--mb-weight-semibold);
  cursor: pointer;
  list-style: none;
  border-radius: var(--mb-radius-lg);
}
.mb-accordion > summary::-webkit-details-marker { display: none; }
.mb-accordion > summary:hover { background: var(--mb-graphite-50); }
.mb-accordion[open] > summary {
  border-block-end: var(--mb-border-thin) solid var(--mb-graphite-200);
  border-end-start-radius: 0;
  border-end-end-radius: 0;
}
.mb-accordion__chevron {
  margin-inline-start: auto;
  color: var(--mb-atlantic-700);
  transition: transform var(--mb-motion-standard) var(--mb-ease-standard);
}
.mb-accordion[open] .mb-accordion__chevron { transform: rotate(90deg); }
[dir="rtl"] .mb-accordion__chevron { transform: scaleX(-1); }
[dir="rtl"] .mb-accordion[open] .mb-accordion__chevron { transform: scaleX(-1) rotate(90deg); }
.mb-accordion__body { padding: var(--mb-space-4); }

/* --------------------------------------------------------------- timeline */

/* Career chronology. Each entry is a native details element, so it expands on
   click AND on keyboard, works on touch, and needs no JavaScript. The source
   layout used hover-to-expand with a JS tap fallback, which is unreachable by
   keyboard and unreliable on touch.

   The rail and dots use logical properties, so in Hebrew the whole chronology
   mirrors to the inline-start side without a second rule. */

.mb-timeline {
  list-style: none;
  padding: 0;
  margin: 0;
  position: relative;
  padding-inline-start: var(--mb-space-8);
}

/* The rail. Fades out at the end rather than stopping abruptly. */
.mb-timeline::before {
  content: "";
  position: absolute;
  inset-inline-start: 5px;
  inset-block: 0.55rem 0;
  inline-size: 1px;
  background: linear-gradient(
    to bottom,
    var(--mb-atlantic-600),
    var(--mb-atlantic-200) 88%,
    transparent
  );
}

.mb-timeline__item {
  position: relative;
  border-radius: var(--mb-radius-md);
}

.mb-timeline__item + .mb-timeline__item { margin-block-start: var(--mb-space-1); }

/* Grid, not flex-wrap. With flex, a title too long to sit beside its year
   wrapped onto a new line and lost its alignment with every other title.
   A two-column grid keeps the year in its own column and lets the title wrap
   inside the second, so the column edge holds however long the string is.
   That matters more in Hebrew, where these strings run longer. */
.mb-timeline__summary {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--mb-space-1) var(--mb-space-3);
  align-items: baseline;
  min-block-size: var(--mb-target-min);
  align-content: center;
  padding-block: var(--mb-space-2);
  padding-inline: 0 var(--mb-space-8);
  border-radius: var(--mb-radius-md);
  cursor: pointer;
  list-style: none;
  position: relative;
  transition: background var(--mb-motion-fast) var(--mb-ease-standard);
}

/* Below this the year sits above its title rather than being squeezed
   beside it. */
@media (max-width: 30rem) {
  .mb-timeline__summary { grid-template-columns: 1fr; }
}

/* Expand affordance. Without it nothing signals that an entry opens. */
.mb-timeline__summary::after {
  content: "";
  position: absolute;
  inset-inline-end: var(--mb-space-3);
  inset-block-start: 1.15rem;
  inline-size: 0.5rem;
  block-size: 0.5rem;
  border-block-end: 2px solid var(--mb-atlantic-600);
  border-inline-end: 2px solid var(--mb-atlantic-600);
  transform: rotate(45deg);
  transition: transform var(--mb-motion-standard) var(--mb-ease-standard);
}
.mb-timeline__item[open] > .mb-timeline__summary::after {
  transform: rotate(-135deg);
}
.mb-timeline__summary::-webkit-details-marker { display: none; }
.mb-timeline__summary:hover { background: var(--mb-atlantic-50); }

/* The dot, anchored to the rail. */
.mb-timeline__summary::before {
  content: "";
  position: absolute;
  inset-inline-start: calc(-1 * var(--mb-space-8));
  margin-inline-start: 0;
  inset-block-start: 1.05rem;
  inline-size: 11px;
  block-size: 11px;
  border: 2px solid var(--mb-atlantic-600);
  border-radius: var(--mb-radius-round);
  background: var(--mb-paper);
  transition: background var(--mb-motion-fast) var(--mb-ease-standard);
}
.mb-timeline__item[open] > .mb-timeline__summary::before,
.mb-timeline__summary:hover::before { background: var(--mb-atlantic-600); }

/* A role held now, marked by a filled dot AND the word "present" in the
   year label, so the distinction is never carried by colour alone. */
.mb-timeline__item[data-current] > .mb-timeline__summary::before {
  background: var(--mb-atlantic-600);
}

.mb-timeline__year {
  flex: none;
  min-inline-size: 6.5rem;
  font-size: var(--mb-text-body-sm);
  font-variant-numeric: tabular-nums;
  color: var(--mb-atlantic-700);
}

.mb-timeline__title {
  font-size: var(--mb-text-body-sm);
  font-weight: var(--mb-weight-medium);
  color: var(--mb-graphite-900);
  line-height: var(--mb-leading-compact);
}

.mb-timeline__detail {
  padding: 0 var(--mb-space-3) var(--mb-space-4) 0;
  padding-inline: var(--mb-space-4) var(--mb-space-3);
  margin-inline-start: -1px;
  border-inline-start: var(--mb-border-thin) solid var(--mb-atlantic-200);
  font-size: var(--mb-text-body-sm);
  color: var(--mb-graphite-700);
  max-inline-size: var(--mb-reading-max);
}

/* ------------------------------------------------------- credential cards */

.mb-cred {
  display: grid;
  gap: var(--mb-space-2);
  padding: var(--mb-space-5);
  border: var(--mb-border-thin) solid var(--mb-graphite-200);
  border-radius: var(--mb-radius-lg);
  background: var(--mb-white);
}
/* One card may carry the Oxide edge, for the single most significant item.
   Never more than one per view. */
.mb-cred[data-signal="oxide"] {
  border-inline-start: var(--mb-edge-clinical) solid var(--mb-oxide-500);
  background: var(--mb-oxide-50);
}
.mb-cred__title {
  font-size: var(--mb-text-body);
  font-weight: var(--mb-weight-semibold);
  color: var(--mb-graphite-900);
}
.mb-cred__sub { font-size: var(--mb-text-body-sm); color: var(--mb-graphite-600); }
.mb-cred__note {
  font-size: var(--mb-text-caption);
  font-weight: var(--mb-weight-medium);
  color: var(--mb-oxide-700);
}

/* ---------------------------------------------------------------- figures */

.mb-figure { margin: 0; display: grid; gap: var(--mb-space-3); }

.mb-figure__media {
  position: relative;
  aspect-ratio: var(--mb-figure-ratio, 4 / 3);
  border-radius: var(--mb-radius-lg);
  overflow: hidden;
  background: var(--mb-graphite-50);
}
.mb-figure__media > img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  display: block;
}

/* Reserved slot for artwork still awaiting clinical review. Holds the exact
   final dimensions so nothing shifts when the illustration lands. */
.mb-figure__placeholder {
  position: absolute;
  inset: 0;
  display: grid;
  align-content: center;
  gap: var(--mb-space-2);
  padding: var(--mb-space-6);
  text-align: center;
  border: var(--mb-border-thin) dashed var(--mb-graphite-300);
  border-radius: var(--mb-radius-lg);
  color: var(--mb-graphite-600);
}
.mb-figure__ph-label { font-size: var(--mb-text-label); font-weight: var(--mb-weight-semibold); }
.mb-figure__ph-note { font-size: var(--mb-text-caption); }

.mb-figure figcaption { font-size: var(--mb-text-caption); color: var(--mb-graphite-600); }

/* ---------------------------------------------------------------- metrics */

.mb-metrics {
  list-style: none;
  padding: 0;
  display: grid;
  gap: var(--mb-space-6);
  grid-template-columns: repeat(auto-fit, minmax(min(11rem, 100%), 1fr));
}
.mb-metric {
  display: grid;
  gap: var(--mb-space-1);
  padding-inline-start: var(--mb-space-4);
  border-inline-start: var(--mb-edge-clinical) solid var(--mb-atlantic-600);
}
.mb-metric__num {
  font-size: var(--mb-text-h3);
  font-weight: var(--mb-weight-semibold);
  font-variant-numeric: tabular-nums;
  line-height: var(--mb-leading-tight);
}
.mb-metric__label { font-size: var(--mb-text-body-sm); color: var(--mb-graphite-600); }

/* Provenance line under a metric block. Required by
   guidelines/data-visualization.md: show the source and the retrieval date
   next to any figure. scripts/update-metrics.mjs rewrites this line, see
   docs/CUTOVER_CHECKLIST.md item 2. */
.mb-metrics-note {
  margin-block-start: var(--mb-space-4);
  font-size: var(--mb-text-caption);
  color: var(--mb-graphite-600);
}

/* An unverified figure is labelled as unverified, in text. */
.mb-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--mb-space-2);
  padding: var(--mb-space-1) var(--mb-space-3);
  border-radius: var(--mb-radius-round);
  font-size: var(--mb-text-caption);
  font-weight: var(--mb-weight-medium);
}
.mb-chip--warning {
  background: #fbf3e9;
  color: var(--mb-warning);
  border: var(--mb-border-thin) solid var(--mb-warning);
}

/* --------------------------------------------------------- anchor targets */

/* Any element an old deep link can land on. The masthead is sticky, so
   without this the browser scrolls the target underneath it. See
   docs/ROUTING.md: legacy fragments survive the redirect and must land
   somewhere visible. */
.mb-anchor {
  scroll-margin-block-start: var(--mb-space-4);
}

/* Only where the masthead is actually sticky does the target need to clear it. */
@media (min-width: 64rem) {
  .mb-anchor {
    scroll-margin-block-start: calc(var(--mb-masthead-h) + var(--mb-space-6));
  }
}

/* --------------------------------------------------- dual-audience block */

/* The clinician layer that every condition section carries. Visually
   subordinate to the patient copy without being hidden from it. */
.mb-clinician {
  margin-block-start: var(--mb-space-6);
  padding: var(--mb-space-4) var(--mb-space-5);
  border: var(--mb-border-thin) solid var(--mb-graphite-200);
  border-inline-start: var(--mb-edge-clinical) solid var(--mb-graphite-500);
  border-radius: var(--mb-radius-md);
  background: var(--mb-graphite-50);
}
.mb-clinician__head {
  display: flex;
  align-items: center;
  gap: var(--mb-space-2);
  font-size: var(--mb-text-label);
  font-weight: var(--mb-weight-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--mb-graphite-700);
  margin-block-end: var(--mb-space-2);
}
.mb-clinician p { font-size: var(--mb-text-body-sm); color: var(--mb-graphite-800); }

/* ------------------------------------------------------------ breadcrumbs */

.mb-breadcrumb { font-size: var(--mb-text-body-sm); margin-block-end: var(--mb-space-6); }
.mb-breadcrumb ol {
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--mb-space-2);
}
.mb-breadcrumb li + li::before {
  content: "";
  display: inline-block;
  inline-size: 0.5em;
  block-size: 0.5em;
  margin-inline-end: var(--mb-space-2);
  border-block-start: 1px solid var(--mb-graphite-400);
  border-inline-end: 1px solid var(--mb-graphite-400);
  transform: rotate(45deg);
  vertical-align: middle;
}
[dir="rtl"] .mb-breadcrumb li + li::before { transform: rotate(-135deg); }