/* ================================================================
   1. COLOR TOKENS
   ================================================================ */

:root,
[data-md-color-scheme="default"] {
  /* Brand */
  --md-primary-fg-color:        #1F2A5A;
  --md-primary-fg-color--light: #2F3D7A;
  --md-primary-fg-color--dark:  #141A40;
  --md-primary-bg-color:        #FFFFFF;
  --md-primary-bg-color--light: rgba(255, 255, 255, 0.75);

  /* Accent (links, hovers, active states) */
  --md-accent-fg-color:              #2F80ED;
  --md-accent-fg-color--transparent: rgba(47, 128, 237, 0.10);
  --md-accent-bg-color:              #FFFFFF;
  --md-accent-bg-color--light:       rgba(255, 255, 255, 0.75);

  /* Surface and text */
  --md-default-bg-color:           #FFFFFF;
  --md-default-fg-color:           #1F2937;
  --md-default-fg-color--light:    #4B5563;
  --md-default-fg-color--lighter:  #6B7280;
  --md-default-fg-color--lightest: #E5E7EB;

  /* Code background */
  --md-code-bg-color: #F1F5F9;
  --md-code-fg-color: #0F172A;

  /* Custom Corridor tokens */
  --corridor-section-bg:        #F8FAFC;
  --corridor-card-border:       #E5E7EB;
  --corridor-card-shadow:       0 1px 2px rgba(0, 0, 0, 0.05);
  --corridor-card-shadow-hover: 0 6px 20px rgba(15, 23, 42, 0.08);

  --corridor-info-bg:        #EFF6FF;
  --corridor-info-border:    #2F80ED;
  --corridor-info-fg:        #1D4ED8;
  --corridor-warning-bg:     #FFFBEB;
  --corridor-warning-border: #F59E0B;
  --corridor-warning-fg:     #B45309;
  --corridor-success-bg:     #ECFDF5;
  --corridor-success-border: #10B981;
  --corridor-success-fg:     #047857;

  --corridor-footer-bg:    #F8FAFC;
  --corridor-footer-fg:    #6B7280;
  --corridor-footer-link:  #2F80ED;
}

[data-md-color-scheme="slate"] {
  --md-primary-fg-color:        #1F2A5A;
  --md-primary-fg-color--light: #2F3D7A;
  --md-primary-fg-color--dark:  #141A40;
  --md-primary-bg-color:        #FFFFFF;

  --md-accent-fg-color:              #5B9BFF;
  --md-accent-fg-color--transparent: rgba(91, 155, 255, 0.12);

  --md-default-bg-color:           #0F172A;
  --md-default-fg-color:           #E5E7EB;
  --md-default-fg-color--light:    #CBD5E1;
  --md-default-fg-color--lighter:  #94A3B8;
  --md-default-fg-color--lightest: #1E293B;

  --md-code-bg-color: #1E293B;
  --md-code-fg-color: #E2E8F0;

  --corridor-section-bg:        #1E293B;
  --corridor-card-border:       rgba(255, 255, 255, 0.08);
  --corridor-card-shadow:       0 1px 2px rgba(0, 0, 0, 0.4);
  --corridor-card-shadow-hover: 0 6px 20px rgba(0, 0, 0, 0.5);

  --corridor-info-bg:        rgba(47, 128, 237, 0.10);
  --corridor-info-border:    #5B9BFF;
  --corridor-info-fg:        #93C5FD;
  --corridor-warning-bg:     rgba(245, 158, 11, 0.10);
  --corridor-warning-border: #F59E0B;
  --corridor-warning-fg:     #FCD34D;
  --corridor-success-bg:     rgba(16, 185, 129, 0.10);
  --corridor-success-border: #34D399;
  --corridor-success-fg:     #6EE7B7;

  --corridor-footer-bg:   #0B1220;
  --corridor-footer-fg:   #94A3B8;
  --corridor-footer-link: #5B9BFF;
}

/* ================================================================
   2. TYPOGRAPHY
   ----------------------------------------------------------------
   Sizes are in px so they are deterministic across Material's
   rem scaling. Hierarchy is intentionally tight — no large jumps
   between heading levels.
   ================================================================ */

body,
.md-typeset {
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.md-typeset {
  font-size: 16px;
  line-height: 1.65;
}

.md-typeset code,
.md-typeset kbd {
  font-family: "JetBrains Mono", "SF Mono", "Fira Code", Menlo, Consolas, monospace;
  font-size: 0.85em;
}

.md-typeset pre,
.md-typeset pre > code {
  font-family: "JetBrains Mono", "SF Mono", "Fira Code", Menlo, Consolas, monospace;
  font-size: 13.5px;
  line-height: 1.5;
}

.md-typeset h1,
.md-typeset h2,
.md-typeset h3,
.md-typeset h4 {
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--md-default-fg-color);
  line-height: 1.25;
}

.md-typeset h1 {
  font-size: 34px;
  line-height: 1.2;
  margin-top: 0;
  margin-bottom: 1rem;
}

.md-typeset h2 {
  font-size: 26px;
  margin-top: 2rem;
  margin-bottom: 0.75rem;
}

.md-typeset h3 {
  font-size: 19px;
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
}

.md-typeset h4 {
  font-size: 16px;
  font-weight: 600;
  margin-top: 1.25rem;
  margin-bottom: 0.4rem;
}

.md-typeset p,
.md-typeset li {
  line-height: 1.65;
}

.md-typeset a {
  color: var(--md-accent-fg-color);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.md-typeset a:hover {
  border-bottom-color: var(--md-accent-fg-color);
}

/* ================================================================
   3. HEADER & TOP TABS
   ================================================================ */

.md-header {
  background-color: var(--md-primary-fg-color);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05);
}

.md-header__title {
  font-weight: 600;
  letter-spacing: -0.01em;
  font-size: 1.05rem;
}

.md-header__title .md-ellipsis {
  font-size: 1.05rem;
}

.md-tabs {
  background-color: var(--md-primary-fg-color);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.md-tabs__link {
  opacity: 0.78;
  transition: opacity 0.15s ease, color 0.15s ease;
  font-weight: 500;
  font-size: 0.78rem;
}

.md-tabs__link:hover {
  opacity: 1;
  color: #FFFFFF;
}

.md-tabs__item--active .md-tabs__link {
  opacity: 1;
  color: #FFFFFF;
  font-weight: 600;
}

.md-tabs__item {
  position: relative;
}

.md-tabs__item--active::after {
  content: "";
  position: absolute;
  left: 0.8rem;
  right: 0.8rem;
  bottom: 0;
  height: 2px;
  background: var(--md-accent-fg-color);
  border-radius: 2px 2px 0 0;
}

/* Sub-tabs (second-row navigation under the primary tab strip) */
.md-subtabs {
  position: sticky;
  top: 4.8rem;
  z-index: 2;
  width: 100%;
  background-color: var(--md-default-bg-color);
  border-bottom: 1px solid var(--corridor-card-border);
}

.md-subtabs__inner {
  display: flex;
  align-items: center;
  min-height: 2.4rem;
}

.md-subtabs__list {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  list-style: none;
}

.md-subtabs__item {
  margin: 0;
  padding: 0;
}

.md-subtabs__link {
  display: inline-flex;
  align-items: center;
  height: 2.4rem;
  padding: 0 1rem;
  color: var(--md-default-fg-color--lighter);
  text-decoration: none;
  font-size: 0.78rem;
  font-weight: 500;
  border-bottom: 2px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.md-subtabs__link:hover {
  color: var(--md-default-fg-color);
  border-bottom: none;
}

.md-subtabs__link--active {
  color: var(--md-accent-fg-color);
  border-bottom-color: var(--md-accent-fg-color);
  font-weight: 600;
}

@media screen and (max-width: 76.1875em) {
  .md-subtabs {
    top: 2.4rem;
  }
}

/* Search input on the dark header */
.md-search__input {
  background-color: rgba(255, 255, 255, 0.10);
  color: #FFFFFF;
  text-overflow: clip;
}
.md-search__input::placeholder {
  color: rgba(255, 255, 255, 0.65);
}
.md-search__input:hover {
  background-color: rgba(255, 255, 255, 0.16);
}

/* When the search panel is open Material flips the input to a white
   surface — text and placeholder need to flip to dark so the user can
   actually see what they're typing. */
[data-md-toggle="search"]:checked ~ .md-header .md-search__input,
.md-search--active .md-search__input {
  background-color: #FFFFFF;
  color: #1F2937;
}
[data-md-toggle="search"]:checked ~ .md-header .md-search__input::placeholder,
.md-search--active .md-search__input::placeholder {
  color: #6B7280;
}

/* Stop the typed query from being clipped: let it scroll inside the
   input instead of truncating with an ellipsis. */
.md-search__form {
  overflow: visible;
}
.md-search__input {
  white-space: nowrap;
  overflow-x: auto;
}

/* Give the search field more room so the "Search documentation"
   placeholder fits on one line, and nudge it left so it doesn't crowd
   the right edge of the header. Only applies on desktop where the
   collapsed search field has a fixed width. */
@media screen and (min-width: 60em) {
  .md-search {
    margin-right: 1rem;
  }
  .md-search__form {
    width: 15rem;
  }
  /* When the user focuses search, let it expand back to its wider
     panel as before. */
  [data-md-toggle="search"]:checked ~ .md-header .md-search__form {
    width: 34.4rem;
  }
}

/* ================================================================
   4. SIDEBARS / IN-PAGE NAV
   ----------------------------------------------------------------
   Three zones, separated by thin vertical dividers:
     [ left nav ]  |  [ main content ]  |  [ TOC ]
   Left nav uses 13–14px text, TOC uses 12–13px (more compact,
   lower emphasis), and the TOC carries an "On this page" label.
   ================================================================ */

.md-sidebar {
  background-color: var(--md-default-bg-color);
}

.md-nav__title {
  font-weight: 600;
  color: var(--md-default-fg-color);
}

.md-nav__link {
  border-radius: 6px;
  padding: 0.25rem 0.5rem;
  transition: background-color 0.12s ease, color 0.12s ease;
}

.md-nav__link:hover {
  color: var(--md-accent-fg-color);
}

.md-nav__link--active,
.md-nav__item--active > .md-nav__link {
  color: var(--md-accent-fg-color);
  background-color: var(--corridor-info-bg);
  font-weight: 600;
}

[data-md-color-scheme="slate"] .md-nav__link--active,
[data-md-color-scheme="slate"] .md-nav__item--active > .md-nav__link {
  background-color: rgba(91, 155, 255, 0.12);
}

/* ----------------------------------------------------------------
   Left sidebar (primary navigation)
   The tint is painted on .md-main__inner (the grid container),
   not on the sidebar itself — the sidebar element is sticky and
   only as tall as the viewport, so a background on it only shows
   at the top. The grid container spans the full article height,
   so a left-edge gradient creates a continuous tinted column for
   the entire scrollable area.
   ---------------------------------------------------------------- */

.md-sidebar--primary .md-nav__link {
  font-size: 13.5px;
  line-height: 1.45;
}

/* Only paint the tint when the primary sidebar is actually visible.
   Material always renders the sidebar element but adds the [hidden]
   HTML attribute when `hide: [navigation]` is in front matter. */
@media screen and (min-width: 76.25em) {
  .md-main__inner:has(.md-sidebar--primary:not([hidden])) {
    background: linear-gradient(
      to right,
      var(--corridor-section-bg) 0,
      var(--corridor-section-bg) 12.1rem,
      transparent 12.1rem
    );
  }
}

/* ----------------------------------------------------------------
   Right sidebar (Table of Contents)
   ---------------------------------------------------------------- */

.md-sidebar--secondary .md-nav__link {
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--md-default-fg-color--lighter);
}

.md-sidebar--secondary .md-nav__link:hover {
  color: var(--md-accent-fg-color);
}

.md-sidebar--secondary .md-nav__link--active {
  color: var(--md-accent-fg-color);
  background-color: transparent;
  font-weight: 600;
}

/* Replace Material's default "Table of contents" label with
   "On this page". Only the text is swapped — Material's built-in
   sticky positioning, padding, and scroll behavior are preserved. */
.md-sidebar--secondary .md-nav__title {
  font-size: 0;
  color: transparent;
}

.md-sidebar--secondary .md-nav__title::before {
  content: "On this page";
  display: block;
  font-size: 11.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--md-default-fg-color--lighter);
}

/* Vertical divider between main content and TOC. Applied to
   .md-content (the article column) so the line follows article
   height; min-height guarantees it always reaches viewport bottom
   on short pages. Only rendered when the secondary sidebar is
   visible — pages with `hide: [toc]` skip this. */
@media screen and (min-width: 60em) {
  .md-main__inner:has(.md-sidebar--secondary:not([hidden])) .md-content {
    border-right: 1px solid var(--corridor-card-border);
    min-height: calc(100vh - 9.6rem);
  }
}

/* Wide layout for landing / section-index pages where one or both
   sidebars are hidden (`hide: [navigation]` or `hide: [toc]`).
   Combines a max-width cap with always-on side padding so there
   is a visible gutter on every viewport size:
     - Wide monitors: centered with large outer margins
     - Mid-size laptops: capped + ~3rem inner gutter
     - Below the cap: padding alone provides breathing room */
.md-main__inner:has(.md-sidebar[hidden]) {
  max-width: 72rem;
  margin-left: auto;
  margin-right: auto;
  padding-left: 3rem;
  padding-right: 3rem;
  box-sizing: border-box;
}

.md-main__inner:has(.md-sidebar[hidden]) .md-content,
.md-main__inner:has(.md-sidebar[hidden]) .md-content__inner {
  max-width: none;
}

@media screen and (max-width: 60em) {
  .md-main__inner:has(.md-sidebar[hidden]) {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

/* ================================================================
   5. FOOTER
   ================================================================ */

.md-footer {
  background-color: var(--md-primary-fg-color);
}

.md-footer-meta {
  background-color: var(--corridor-footer-bg);
  color: var(--corridor-footer-fg);
  border-top: 1px solid var(--corridor-card-border);
}

.md-footer-meta a,
.md-footer-meta__inner a,
.md-footer-copyright a {
  color: var(--corridor-footer-link);
  border-bottom: none;
}

.md-footer-meta a:hover {
  color: var(--corridor-footer-link);
  text-decoration: underline;
}

.md-footer-meta .md-footer-copyright,
.md-footer-meta__inner {
  color: var(--corridor-footer-fg);
}

/* ================================================================
   6. HERO (landing page)
   ================================================================ */

.hero {
  padding: 2.75rem 0 1.75rem;
  text-align: left;
}

.hero h1 {
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
  letter-spacing: -0.025em;
  color: var(--md-default-fg-color);
}

.hero p {
  font-size: 1.05rem;
  color: var(--md-default-fg-color--light);
  max-width: 760px;
  margin: 0;
  line-height: 1.6;
}

/* ================================================================
   7. GRID CARDS
   ================================================================ */

.md-typeset .grid.cards > ul > li,
.md-typeset .grid.cards > ol > li {
  position: relative;
  background: var(--md-default-bg-color);
  border: 1px solid var(--corridor-card-border);
  border-radius: 10px;
  padding: 1.1rem 1.2rem 1.2rem;
  box-shadow: var(--corridor-card-shadow);
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.md-typeset .grid.cards > ul > li:hover,
.md-typeset .grid.cards > ol > li:hover {
  transform: translateY(-2px);
  border-color: var(--md-accent-fg-color);
  box-shadow: var(--corridor-card-shadow-hover);
}

.md-typeset .grid.cards h3,
.md-typeset .grid.cards p {
  margin: 0.35rem 0;
}

.md-typeset .grid.cards strong {
  font-size: 1rem;
  font-weight: 600;
  color: var(--md-default-fg-color);
}

/* Top-right arrow indicator */
.md-typeset .grid.cards > ul > li::after,
.md-typeset .grid.cards > ol > li::after {
  content: "→";
  position: absolute;
  top: 0.75rem;
  right: 1rem;
  font-size: 1rem;
  color: var(--md-default-fg-color--lighter);
  pointer-events: none;
  transition: color 0.15s ease, transform 0.15s ease;
}

.md-typeset .grid.cards > ul > li:hover::after,
.md-typeset .grid.cards > ol > li:hover::after {
  color: var(--md-accent-fg-color);
  transform: translateX(3px);
}

/* Make the entire card clickable; hide the visible link text */
.md-typeset .grid.cards > ul > li > p:last-child > a,
.md-typeset .grid.cards > ol > li > p:last-child > a {
  position: absolute;
  inset: 0;
  font-size: 0;
  color: transparent;
  z-index: 1;
  border-radius: inherit;
  border-bottom: none;
}

.md-typeset .grid.cards > ul > li > p:last-child > a:focus-visible,
.md-typeset .grid.cards > ol > li > p:last-child > a:focus-visible {
  outline: 2px solid var(--md-accent-fg-color);
  outline-offset: 2px;
}

.md-typeset .grid.cards > ul > li > p:last-child:has(> a:only-child),
.md-typeset .grid.cards > ol > li > p:last-child:has(> a:only-child) {
  margin: 0;
  padding: 0;
  height: 0;
}

/* 4-column landing-page layout */
.md-typeset .grid.cards.home-cards > ul {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
}

@media screen and (max-width: 1100px) {
  .md-typeset .grid.cards.home-cards > ul {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media screen and (max-width: 600px) {
  .md-typeset .grid.cards.home-cards > ul {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* 2-column Getting Started landing layout */
.md-typeset .grid.cards.gs-cards > ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  max-width: 56rem;
}

@media screen and (max-width: 600px) {
  .md-typeset .grid.cards.gs-cards > ul {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ================================================================
   8. SECTION CONTAINERS (utility class)
   ================================================================ */

.section,
.md-typeset .section {
  background: var(--corridor-section-bg);
  border: 1px solid var(--corridor-card-border);
  border-radius: 12px;
  padding: 1.75rem 1.75rem;
  margin: 1.75rem 0;
}

/* ================================================================
   9. ADMONITIONS / CALLOUTS
   ================================================================ */

.md-typeset .admonition,
.md-typeset details {
  border-radius: 8px;
  border-left-width: 4px;
  box-shadow: none;
  font-size: 0.78rem;
  border-color: var(--corridor-card-border);
}

.md-typeset .admonition > .admonition-title,
.md-typeset details > summary {
  font-weight: 600;
}

/* Info / Note */
.md-typeset .admonition.note,
.md-typeset .admonition.info,
.md-typeset details.note,
.md-typeset details.info {
  border-left-color: var(--corridor-info-border);
  background: var(--corridor-info-bg);
}

.md-typeset .note > .admonition-title,
.md-typeset .info > .admonition-title,
.md-typeset details.note > summary,
.md-typeset details.info > summary {
  background: rgba(47, 128, 237, 0.08);
  color: var(--corridor-info-fg);
}

.md-typeset .note > .admonition-title::before,
.md-typeset .info > .admonition-title::before,
.md-typeset details.note > summary::before,
.md-typeset details.info > summary::before {
  background-color: var(--corridor-info-border);
}

/* Warning */
.md-typeset .admonition.warning,
.md-typeset details.warning {
  border-left-color: var(--corridor-warning-border);
  background: var(--corridor-warning-bg);
}

.md-typeset .warning > .admonition-title,
.md-typeset details.warning > summary {
  background: rgba(245, 158, 11, 0.08);
  color: var(--corridor-warning-fg);
}

.md-typeset .warning > .admonition-title::before,
.md-typeset details.warning > summary::before {
  background-color: var(--corridor-warning-border);
}

/* Success / Tip */
.md-typeset .admonition.success,
.md-typeset .admonition.tip,
.md-typeset details.success,
.md-typeset details.tip {
  border-left-color: var(--corridor-success-border);
  background: var(--corridor-success-bg);
}

.md-typeset .success > .admonition-title,
.md-typeset .tip > .admonition-title,
.md-typeset details.success > summary,
.md-typeset details.tip > summary {
  background: rgba(16, 185, 129, 0.08);
  color: var(--corridor-success-fg);
}

.md-typeset .success > .admonition-title::before,
.md-typeset .tip > .admonition-title::before,
.md-typeset details.success > summary::before,
.md-typeset details.tip > summary::before {
  background-color: var(--corridor-success-border);
}

/* ================================================================
   10. CODE BLOCKS
   ================================================================ */

.md-typeset code {
  background-color: var(--md-code-bg-color);
  color: var(--md-code-fg-color);
  border-radius: 4px;
  padding: 0.1rem 0.35rem;
  font-size: 0.82em;
}

.md-typeset pre > code {
  border-radius: 8px;
  padding: 0.85rem 1rem;
}

/* ================================================================
   11. SCREENSHOTS
   ================================================================ */

.md-typeset img.screenshot {
  display: block;
  max-width: 100%;
  margin: 1.5rem auto;
  border: 1px solid var(--corridor-card-border);
  border-radius: 10px;
  box-shadow: var(--corridor-card-shadow-hover);
}

[data-md-color-scheme="slate"] .md-typeset img.screenshot {
  border-color: rgba(255, 255, 255, 0.08);
}

.md-typeset figure figcaption {
  font-size: 0.75rem;
  color: var(--md-default-fg-color--light, #6b7280);
  line-height: 1.5;
  margin-top: 0.4rem;
}

/* Shared styled field tables used in how-to guides */
.md-typeset .attr-table { width: 100%; border-collapse: separate; border-spacing: 0; margin: 1rem 0 1.5rem; font-family: var(--font-ui, ui-sans-serif, system-ui, sans-serif); border: 1px solid #e5e7eb; border-radius: 12px; overflow: hidden; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04); }
.md-typeset .attr-table thead th { background: #f9fafb; color: #374151; font-weight: 600; font-size: 12.5px; letter-spacing: 0.05em; text-transform: uppercase; text-align: left; padding: 12px 18px; border-bottom: 1px solid #e5e7eb; }
.md-typeset .attr-table tbody td { padding: 14px 18px; border-bottom: 1px solid #f1f3f7; font-size: 14px; color: #1f2937; vertical-align: top; line-height: 1.55; }
.md-typeset .attr-table tbody tr:last-child td { border-bottom: none; }
.md-typeset .attr-table tbody tr:hover td { background: #fafbfd; }
.md-typeset .attr-table .field-cell { white-space: nowrap; width: 180px; font-weight: 600; color: #111827; }
.md-typeset .attr-table .req { display: inline-block; margin-left: 6px; font-size: 10.5px; font-weight: 700; padding: 1px 6px; border-radius: 999px; background: #fee2e2; color: #b91c1c; letter-spacing: 0.04em; text-transform: uppercase; }
.md-typeset .attr-table code { background: #f3f4f6; padding: 1px 6px; border-radius: 4px; font-size: 12.5px; }

/* ================================================================
   12. MERMAID DIAGRAMS
   ================================================================ */

.md-typeset .mermaid {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 1.75rem 0;
  padding: 1.75rem 1rem;
  background-color: var(--corridor-section-bg);
  border: 1px solid var(--corridor-card-border);
  border-radius: 12px;
  box-shadow: var(--corridor-card-shadow);
  overflow-x: auto;
}

.md-typeset .mermaid svg {
  max-width: 100%;
  height: auto;
}

/* Rounded edge labels with subtle background, matching the section bg */
.md-typeset .mermaid .edgeLabel {
  font-family: "Inter", system-ui, sans-serif !important;
  font-size: 0.78rem !important;
  font-weight: 500;
  padding: 2px 6px;
  border-radius: 4px;
}

/* Slightly thicker, smoother edges */
.md-typeset .mermaid .flowchart-link {
  stroke-width: 1.6px;
}

[data-md-color-scheme="slate"] .md-typeset .mermaid {
  background-color: rgba(255, 255, 255, 0.03);
}

/* Bare variant: drops the framed container so the diagram can use the full
   text-column width. Used for diagrams whose own subgraph borders already
   provide visual grouping. */
.md-typeset .mermaid-bare .mermaid {
  margin: 1.75rem 0;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.md-typeset .mermaid-bare .mermaid svg {
  width: 100%;
  max-width: 100%;
  height: auto;
}

[data-md-color-scheme="slate"] .md-typeset .mermaid-bare .mermaid {
  background: transparent;
}

/* ================================================================
   13. TABLES
   ================================================================ */

.md-typeset table:not([class]) {
  border: 1px solid var(--corridor-card-border);
  border-radius: 8px;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  font-size: 0.82rem;
}

.md-typeset table:not([class]) th {
  background-color: var(--corridor-section-bg);
  color: var(--md-default-fg-color);
  font-weight: 600;
  border-bottom: 1px solid var(--corridor-card-border);
}

.md-typeset table:not([class]) td {
  border-top: 1px solid var(--corridor-card-border);
}

/* Section-header rows inside how-to / catalog tables (colspan=2, centered, subtle fill) */
.md-typeset table tr.section-header td {
  text-align: center;
  background: var(--corridor-section-bg);
  color: var(--md-default-fg-color);
  font-weight: 600;
  letter-spacing: 0.02em;
  padding-top: 0.7em;
  padding-bottom: 0.7em;
}

/* ================================================================
   Announcement bar
   ================================================================ */
.md-banner__inner {
  text-align: center;
}
.md-banner__link,
.md-banner__link:link,
.md-banner__link:visited,
.md-banner__link:hover,
.md-banner__link:active {
  color: inherit;
  text-decoration: underline;
}

/* ================================================================
   Status tags (for status key / rule tables)
   ================================================================ */
.status-tag {
  display: inline-block;
  padding: 0.2em 0.7em;
  border-radius: 5px;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.status-tag.draft    { background: #FEF3C7; color: #92400E; border: 1px solid #F59E0B; }
.status-tag.pending  { background: #DBEAFE; color: #1E40AF; border: 1px solid #2F80ED; }
.status-tag.approved { background: #D1FAE5; color: #065F46; border: 1px solid #10B981; }
.status-tag.active   { background: #CCFBF1; color: #134E4A; border: 1px solid #14B8A6; }
.status-tag.rejected { background: #FEE2E2; color: #7F1D1D; border: 1px solid #EF4444; }