:root {
  --brand-primary: #19b3ff;
  --brand-primary-dark: #1092d8;
  --brand-navy: #004b70;
  --brand-ink: #010203;
  --accent-sky: #c7e9fd;
  --text-primary: #102437;
  --text-muted: #576777;
  --text-on-dark: #e6f0f8;
  --text-on-dark-muted: #c1d2e0;
  --surface: #ffffff;
  --surface-muted: #f5fbff;
  --surface-dark: #0f1722;
  --surface-dark-muted: #162332;
  --surface-dark-elevated: #1d2d3d;
  --border: rgba(0, 75, 112, 0.12);
  --border-strong: rgba(0, 75, 112, 0.2);
  --border-dark: rgba(199, 233, 253, 0.16);
  --border-dark-strong: rgba(199, 233, 253, 0.24);
  --shadow: 0 24px 42px rgba(0, 38, 64, 0.16);
  --shadow-soft: 0 12px 28px rgba(0, 38, 64, 0.1);
  --shadow-dark: 0 18px 36px rgba(0, 0, 0, 0.28);
  --radius-lg: 20px;
  --radius-md: 14px;
  --radius-sm: 8px;

  --bf-status-icon-draft: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25m17.71-10.21a.996.996 0 0 0 0-1.41L18.37 3.29a.996.996 0 1 0-1.41 1.41l2.34 2.34c.39.39 1.03.39 1.41 0Z"/></svg>');
  --bf-status-icon-ready: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 6a9.77 9.77 0 0 1 9 6 9.77 9.77 0 0 1-9 6 9.77 9.77 0 0 1-9-6 9.77 9.77 0 0 1 9-6m0 2a4 4 0 0 0-4 4 4 4 0 0 0 4 4 4 4 0 0 0 4-4 4 4 0 0 0-4-4m0 2a2 2 0 0 1 2 2 2 2 0 0 1-2 2 2 2 0 0 1-2-2 2 2 0 0 1 2-2Z"/></svg>');
  --bf-status-icon-approved: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2a10 10 0 1 0 10 10A10 10 0 0 0 12 2m4.59 5.58L10 14.17l-2.59-2.58L6 13l4 4 8-8-1.41-1.42Z"/></svg>');
  --bf-status-icon-blocked: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2a10 10 0 1 0 10 10A10 10 0 0 0 12 2m4.59 13.59L15.17 17 12 13.83 8.83 17l-1.42-1.41L10.59 12 7.41 8.83l1.42-1.42L12 10.59l3.17-3.18 1.42 1.42L13.41 12Z"/></svg>');
  --bf-status-icon-superseded: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20.54 5.23 19.15 3.55A2 2 0 0 0 18 3H6a2 2 0 0 0-1.15.55L3.46 5.23A2 2 0 0 0 3 6.5V19a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6.5a2 2 0 0 0-.46-1.27M6.24 5h11.52l.81 1H5.43M19 19H5V8h14m-9.55 2h5.1v2h-5.1Z"/></svg>');

  --bf-status-draft-fg: #0d84c5;
  --bf-status-draft-bg: rgba(25, 179, 255, 0.16);
  --bf-status-draft-border: rgba(16, 146, 216, 0.28);
  --bf-status-ready-fg: #c48a11;
  --bf-status-ready-bg: rgba(196, 138, 17, 0.16);
  --bf-status-ready-border: rgba(196, 138, 17, 0.28);
  --bf-status-approved-fg: #1f8553;
  --bf-status-approved-bg: rgba(31, 133, 83, 0.16);
  --bf-status-approved-border: rgba(31, 133, 83, 0.28);
  --bf-status-blocked-fg: #c14343;
  --bf-status-blocked-bg: rgba(193, 67, 67, 0.16);
  --bf-status-blocked-border: rgba(193, 67, 67, 0.28);
  --bf-status-superseded-fg: #5a6876;
  --bf-status-superseded-bg: rgba(90, 104, 118, 0.16);
  --bf-status-superseded-border: rgba(90, 104, 118, 0.28);

  --md-primary-fg-color: var(--brand-primary);
  --md-primary-fg-color--dark: var(--brand-primary-dark);
  --md-accent-fg-color: var(--brand-primary-dark);
  --md-typeset-color: var(--text-primary);
  --md-default-bg-color: var(--surface);
  --md-code-bg-color: var(--surface-muted);
}

body {
  font-family: "Roboto", "Segoe UI", -apple-system, BlinkMacSystemFont, sans-serif;
}

.md-header {
  background-color: var(--brand-primary);
  backdrop-filter: blur(8px);
  box-shadow: 0 10px 24px rgba(0, 38, 64, 0.12);
}

.md-typeset h1,
.md-typeset h2,
.md-typeset h3 {
  color: var(--brand-navy);
}

.md-typeset a {
  color: var(--brand-navy);
}

.md-typeset code {
  border-radius: var(--radius-sm);
}

.md-button {
  border-radius: var(--radius-md);
}

.md-main {
  background: var(--surface);
}

.md-content {
  max-width: 100%;
}

.md-grid {
  max-width: 100%;
}

.md-typeset table:not([class]) {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.md-typeset table:not([class]) th {
  background-color: var(--surface-muted);
}

.mermaid {
  background-color: var(--surface-muted);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow);
  margin: 1.5rem 0;
  padding: 1rem;
}

/*
 * Consolidated legacy extra.css component styles into this file.
 * Differences from the older MkDocs overrides:
 * - Teal and amber accents now use the BetterFleet blue palette.
 * - Shared border and radius tokens replace one-off component values.
 * - Hero blocks, cards, and pills now match the same surface system as tables and Mermaid blocks.
 */
.md-typeset .hero {
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  padding: 1rem 1.25rem;
  background: linear-gradient(120deg, rgba(25, 179, 255, 0.1), rgba(199, 233, 253, 0.35));
  box-shadow: var(--shadow-soft);
}

.md-typeset .grid.cards {
  display: grid;
  gap: 0.9rem;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.md-typeset .grid.cards > div {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 0.8rem;
  background: linear-gradient(180deg, var(--surface-muted), var(--surface));
  box-shadow: var(--shadow-soft);
}

.md-typeset .pill {
  display: inline-block;
  border: 1px solid rgba(25, 179, 255, 0.35);
  border-radius: 999px;
  padding: 0.1rem 0.55rem;
  margin-right: 0.2rem;
  font-size: 0.7rem;
  background-color: rgba(199, 233, 253, 0.45);
  color: var(--brand-navy);
}

/* Material page-status markers use .md-status--<status>. Keep icons and colors here. */
.md-status {
  --bf-status-fg: var(--brand-navy);
  --bf-status-bg: rgba(25, 179, 255, 0.12);
  --bf-status-border: rgba(25, 179, 255, 0.24);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 0.85rem;
  height: 0.85rem;
  margin-inline-start: auto;
  margin-inline-end: 1.5rem;
  float: right;
  margin-top: 0.15em;
  border-radius: 999px;
  background-color: var(--bf-status-bg);
  box-shadow: inset 0 0 0 1px var(--bf-status-border);
  color: var(--bf-status-fg);
  line-height: 1;
  vertical-align: -0.1em;
}

.md-status::after {
  content: "";
  width: 0.55rem;
  height: 0.55rem;
  background-color: currentColor;
  mask-position: center;
  mask-repeat: no-repeat;
  mask-size: contain;
  -webkit-mask-position: center;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
}

.md-status--draft {
  --bf-status-fg: var(--bf-status-draft-fg);
  --bf-status-bg: var(--bf-status-draft-bg);
  --bf-status-border: var(--bf-status-draft-border);
}

.md-status--draft::after {
  mask-image: var(--bf-status-icon-draft);
  -webkit-mask-image: var(--bf-status-icon-draft);
}

.md-status--ready_for_review,
.md-status--ready-for-review {
  --bf-status-fg: var(--bf-status-ready-fg);
  --bf-status-bg: var(--bf-status-ready-bg);
  --bf-status-border: var(--bf-status-ready-border);
}

.md-status--ready_for_review::after,
.md-status--ready-for-review::after {
  mask-image: var(--bf-status-icon-ready);
  -webkit-mask-image: var(--bf-status-icon-ready);
}

.md-status--approved {
  --bf-status-fg: var(--bf-status-approved-fg);
  --bf-status-bg: var(--bf-status-approved-bg);
  --bf-status-border: var(--bf-status-approved-border);
}

.md-status--approved::after {
  mask-image: var(--bf-status-icon-approved);
  -webkit-mask-image: var(--bf-status-icon-approved);
}

.md-status--blocked {
  --bf-status-fg: var(--bf-status-blocked-fg);
  --bf-status-bg: var(--bf-status-blocked-bg);
  --bf-status-border: var(--bf-status-blocked-border);
}

.md-status--blocked::after {
  mask-image: var(--bf-status-icon-blocked);
  -webkit-mask-image: var(--bf-status-icon-blocked);
}

.md-status--superseded {
  --bf-status-fg: var(--bf-status-superseded-fg);
  --bf-status-bg: var(--bf-status-superseded-bg);
  --bf-status-border: var(--bf-status-superseded-border);
}

.md-status--superseded::after {
  mask-image: var(--bf-status-icon-superseded);
  -webkit-mask-image: var(--bf-status-icon-superseded);
}

body.bf-no-scroll {
  overflow: hidden;
}

[data-md-color-scheme="slate"] {
  --md-default-bg-color: var(--surface-dark);
  --md-code-bg-color: var(--surface-dark-muted);
  --md-typeset-color: var(--text-on-dark);
  --bf-status-draft-fg: #7fd8ff;
  --bf-status-draft-bg: rgba(25, 179, 255, 0.2);
  --bf-status-draft-border: rgba(127, 216, 255, 0.28);
  --bf-status-ready-fg: #ffd186;
  --bf-status-ready-bg: rgba(196, 138, 17, 0.24);
  --bf-status-ready-border: rgba(255, 209, 134, 0.24);
  --bf-status-approved-fg: #8fe1af;
  --bf-status-approved-bg: rgba(31, 133, 83, 0.24);
  --bf-status-approved-border: rgba(143, 225, 175, 0.26);
  --bf-status-blocked-fg: #ffaaaa;
  --bf-status-blocked-bg: rgba(193, 67, 67, 0.24);
  --bf-status-blocked-border: rgba(255, 170, 170, 0.24);
  --bf-status-superseded-fg: #d0d8df;
  --bf-status-superseded-bg: rgba(193, 210, 224, 0.16);
  --bf-status-superseded-border: rgba(193, 210, 224, 0.24);
}

[data-md-color-scheme="slate"] .md-main {
  background:
    radial-gradient(circle at 12% 8%, rgba(25, 179, 255, 0.08), transparent 26%),
    linear-gradient(180deg, #0b1420 0%, var(--surface-dark) 100%);
}

[data-md-color-scheme="slate"] .md-typeset h1,
[data-md-color-scheme="slate"] .md-typeset h2,
[data-md-color-scheme="slate"] .md-typeset h3 {
  color: var(--text-on-dark);
}

[data-md-color-scheme="slate"] .md-typeset a {
  color: var(--brand-primary);
}

[data-md-color-scheme="slate"] .md-typeset table:not([class]) {
  border-color: var(--border-dark);
}

[data-md-color-scheme="slate"] .md-typeset table:not([class]) th {
  background-color: var(--surface-dark-elevated);
  color: var(--text-on-dark);
}

[data-md-color-scheme="slate"] .mermaid {
  background-color: var(--surface-dark-muted);
  border-color: var(--border-dark);
  box-shadow: var(--shadow-dark);
}

[data-md-color-scheme="slate"] .md-typeset .hero {
  border-color: var(--border-dark-strong);
  background: linear-gradient(120deg, rgba(25, 179, 255, 0.12), rgba(15, 23, 34, 0.92));
  box-shadow: var(--shadow-dark);
}

[data-md-color-scheme="slate"] .md-typeset .grid.cards > div {
  border-color: var(--border-dark);
  background: linear-gradient(180deg, var(--surface-dark-muted), var(--surface-dark));
  box-shadow: var(--shadow-dark);
}

[data-md-color-scheme="slate"] .md-typeset .pill {
  border-color: rgba(25, 179, 255, 0.45);
  background-color: rgba(25, 179, 255, 0.16);
  color: var(--text-on-dark);
}