/* ============================================================
   Syscribe · MkDocs Material theme overrides
   Engineering Blueprint palette — dark-first, high-contrast
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

/* ── Dark scheme ──────────────────────────────────────────── */
[data-md-color-scheme="slate"] {
  /* Surfaces: three distinct levels of dark steel-blue */
  --md-default-bg-color:           #0E1520;
  --md-default-bg-color--light:    #161E2E;
  --md-default-bg-color--lighter:  #1C2840;
  --md-default-bg-color--lightest: #253350;

  /* Text: cool white with clearly separated contrast levels */
  --md-default-fg-color:           #D8E4F2;
  --md-default-fg-color--light:    #D8E4F2;
  --md-default-fg-color--lighter:  #8AABCC;   /* secondary: readable, not dim */
  --md-default-fg-color--lightest: #3D5878;   /* labels / tertiary */

  /* Engineering blue accent — authoritative, precise */
  /* NOTE: --md-primary-bg-color is the TEXT colour rendered ON the primary
     background (header, tabs).  Must be light so icons/labels are visible. */
  --md-primary-fg-color:           #2B74D8;
  --md-primary-fg-color--light:    rgba(43, 116, 216, 0.18);
  --md-primary-bg-color:           #D8E4F2;
  --md-primary-bg-color--light:    rgba(216, 228, 242, 0.70);

  --md-accent-fg-color:            #2B74D8;
  --md-accent-fg-color--transparent: rgba(43, 116, 216, 0.12);
  --md-accent-bg-color:            #0E1520;

  --md-code-bg-color:              #080E18;
  --md-code-fg-color:              #B8D0E8;

  --md-typeset-color:              #B8D0E8;
  --md-typeset-a-color:            #4D9BF5;   /* links: brighter than accent for readability */

  --md-footer-bg-color:            #0A1018;
  --md-footer-bg-color--dark:      #060C14;
  --md-footer-fg-color:            #4D6E90;
  --md-footer-fg-color--light:     #2D4860;
  --md-footer-fg-color--lighter:   #1A2C3E;

  --md-shadow-z1: 0 1px 6px rgba(0,0,0,0.70);
  --md-shadow-z2: 0 4px 16px rgba(0,0,0,0.70);

  /* ── Design tokens (used by home.html and extra.css rules) ── */
  --sml-bg:        #0E1520;
  --sml-bg-1:      #161E2E;
  --sml-bg-2:      #1C2840;
  --sml-bg-3:      #253350;
  --sml-border:    #2B3E5A;
  --sml-text:      #D8E4F2;
  --sml-text-2:    #8AABCC;
  --sml-text-3:    #3D5878;
  --sml-accent:    #2B74D8;
  --sml-accent-hi: #4D9BF5;   /* brighter variant for links and highlights */
  --sml-accent-d:  rgba(43, 116, 216, 0.12);
  --sml-on-accent: #FFFFFF;
  --sml-green:     #2EA043;
  --sml-amber:     #BB8A00;
  --sml-red:       #CF3B3B;
}

/* ── Light scheme ─────────────────────────────────────────── */
[data-md-color-scheme="default"] {
  --md-primary-fg-color:  #0F4DA0;
  --md-primary-bg-color:  #FFFFFF;
  --md-accent-fg-color:   #0F4DA0;

  --sml-bg:        #FFFFFF;
  --sml-bg-1:      #F0F5FC;
  --sml-bg-2:      #DDE8F7;
  --sml-bg-3:      #C8D8EE;
  --sml-border:    #B0C8E8;
  --sml-text:      #0B1829;
  --sml-text-2:    #1D3C6B;
  --sml-text-3:    #4E72A8;
  --sml-accent:    #0F4DA0;
  --sml-accent-hi: #1563CC;
  --sml-accent-d:  rgba(15, 77, 160, 0.08);
  --sml-on-accent: #FFFFFF;
  --sml-green:     #1A7F37;
  --sml-amber:     #9A6700;
  --sml-red:       #B91C1C;
}

/* ── Typography ───────────────────────────────────────────── */
:root {
  --md-text-font: "Inter", system-ui, sans-serif;
  --md-code-font: "JetBrains Mono", ui-monospace, monospace;
}

body {
  font-family: var(--md-text-font);
  -webkit-font-smoothing: antialiased;
}

/* ── Header ───────────────────────────────────────────────── */
.md-header {
  background-color: var(--sml-bg-1);
  border-bottom: 1px solid var(--sml-border);
  box-shadow: var(--md-shadow-z1);
  color: var(--sml-text);
}

/* Material uses --md-primary-bg-color for header icons/text.
   Override directly so icons, search, and breadcrumbs are always visible. */
.md-header__button,
.md-header__button.md-icon,
.md-header__topic,
.md-header__title {
  color: var(--sml-text);
}

.md-header__button:hover {
  color: var(--sml-accent-hi);
}

.md-header__title {
  font-weight: 700;
  letter-spacing: -0.02em;
  font-size: 0.94rem;
}

/* ── Navigation tabs ──────────────────────────────────────── */
.md-tabs {
  background-color: var(--sml-bg-1);
  border-bottom: 1px solid var(--sml-border);
}

.md-tabs__link {
  font-size: 0.81rem;
  font-weight: 500;
  color: var(--sml-text-2);
  opacity: 1;
  letter-spacing: 0.01em;
}

.md-tabs__link--active,
.md-tabs__link:hover {
  color: var(--sml-text);
  opacity: 1;
}

.md-tabs__link--active::after {
  background-color: var(--sml-accent);
  height: 2px;
}

/* ── Sidebar ──────────────────────────────────────────────── */
.md-sidebar {
  background-color: var(--sml-bg-1);
}

.md-sidebar__inner {
  border-right: 1px solid var(--sml-border);
}

.md-nav__title {
  font-family: var(--md-code-font);
  font-size: 0.60rem;
  letter-spacing: 0.14em;
  color: var(--sml-text-3);
  text-transform: uppercase;
  padding: 0.65rem 0.8rem 0.3rem;
}

.md-nav__link {
  font-size: 0.83rem;
  color: var(--sml-text-2);
  border-left: 2px solid transparent;
  padding-left: 0.6rem;
}

.md-nav__link:hover {
  color: var(--sml-text);
}

.md-nav__link--active {
  border-left-color: var(--sml-accent);
  color: var(--sml-accent-hi);
  background-color: var(--sml-accent-d);
  font-weight: 600;
}

/* ── Content ──────────────────────────────────────────────── */
.md-content {
  background-color: var(--sml-bg);
}

.md-typeset h1 {
  font-size: 2.0rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.18;
  color: var(--sml-text);
  margin-bottom: 0.4rem;
}

.md-typeset h2 {
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--sml-text);
  border-bottom: 1px solid var(--sml-border);
  padding-bottom: 0.3rem;
  margin-top: 2.2rem;
}

.md-typeset h3 {
  font-size: 1.0rem;
  font-weight: 700;
  color: var(--sml-text);
  margin-top: 1.6rem;
}

.md-typeset h4 {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--sml-text-2);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-top: 1.2rem;
}

.md-typeset p {
  color: var(--sml-text-2);
  line-height: 1.78;
  font-size: 0.93rem;
}

/* Links */
.md-typeset a {
  color: var(--sml-accent-hi);
  text-decoration: none;
  font-weight: 500;
  border-bottom: 1px solid transparent;
  transition: border-color 120ms;
}

.md-typeset a:hover {
  border-bottom-color: var(--sml-accent-hi);
}

/* ── Inline code ──────────────────────────────────────────── */
.md-typeset code {
  background-color: var(--sml-accent-d);
  border: 1px solid var(--sml-border);
  border-radius: 3px;
  color: var(--sml-accent-hi);
  font-size: 0.81em;
  padding: 0.07em 0.38em;
  font-weight: 500;
}

/* Code inside pre — override inline style above */
.md-typeset pre > code {
  border: none;
  border-radius: 0;
  padding: 0;
  color: var(--md-code-fg-color);
  font-weight: 400;
  background: transparent;
}

/* ── Fenced code blocks ───────────────────────────────────── */
.md-typeset .highlight {
  background-color: var(--md-code-bg-color);
  border: 1px solid var(--sml-border);
  border-radius: 5px;
  overflow: hidden;
}

.md-typeset .highlight pre {
  margin: 0;
  font-size: 0.79rem;
  line-height: 1.82;
  padding: 0.9rem 1.1rem;
}

.md-typeset .highlight .filename {
  background-color: var(--sml-bg-2);
  border-bottom: 1px solid var(--sml-border);
  color: var(--sml-text-3);
  font-family: var(--md-code-font);
  font-size: 0.70rem;
  letter-spacing: 0.05em;
  padding: 0.5rem 1rem;
}

.md-clipboard { color: var(--sml-text-3); }
.md-clipboard:hover { color: var(--sml-accent-hi); }

/* ── Admonitions ──────────────────────────────────────────── */
.md-typeset .admonition,
.md-typeset details {
  background-color: var(--sml-bg-1);
  border: 1px solid var(--sml-border);
  border-left-width: 4px;
  border-radius: 4px;
  box-shadow: none;
  font-size: 0.87rem;
}

.md-typeset .admonition-title,
.md-typeset summary {
  background-color: transparent;
  border-bottom: 1px solid var(--sml-border);
  font-family: var(--md-code-font);
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* Note / info → engineering blue */
.md-typeset .admonition.note,
.md-typeset .admonition.info,
.md-typeset details.note {
  border-left-color: var(--sml-accent);
}
.md-typeset .note > .admonition-title,
.md-typeset .info > .admonition-title {
  color: var(--sml-accent-hi);
}
.md-typeset .note > .admonition-title::before,
.md-typeset .info > .admonition-title::before {
  background-color: var(--sml-accent-hi);
}

/* Warning → amber */
.md-typeset .admonition.warning,
.md-typeset details.warning {
  border-left-color: #D97706;
}
.md-typeset .warning > .admonition-title { color: #F59E0B; }
.md-typeset .warning > .admonition-title::before { background-color: #F59E0B; }

/* Danger → red */
.md-typeset .admonition.danger,
.md-typeset details.danger {
  border-left-color: #DC2626;
}
.md-typeset .danger > .admonition-title { color: #EF4444; }
.md-typeset .danger > .admonition-title::before { background-color: #EF4444; }

/* Tip → green */
.md-typeset .admonition.tip,
.md-typeset details.tip {
  border-left-color: #16A34A;
}
.md-typeset .tip > .admonition-title { color: #22C55E; }
.md-typeset .tip > .admonition-title::before { background-color: #22C55E; }

/* ── Tables ───────────────────────────────────────────────── */
.md-typeset table:not([class]) {
  background-color: var(--sml-bg-1);
  border: 1px solid var(--sml-border);
  border-radius: 5px;
  font-size: 0.84rem;
  overflow: hidden;
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
}

.md-typeset table:not([class]) th {
  background-color: var(--sml-bg-2);
  border-bottom: 2px solid var(--sml-border);
  font-family: var(--md-code-font);
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sml-text-2);
  font-weight: 700;
  padding: 0.55rem 0.85rem;
}

.md-typeset table:not([class]) td {
  border-bottom: 1px solid var(--sml-border);
  color: var(--sml-text-2);
  padding: 0.5rem 0.85rem;
  line-height: 1.55;
  vertical-align: top;
}

.md-typeset table:not([class]) tr:last-child td {
  border-bottom: none;
}

/* First column — full brightness, monospace (codes, names, keys) */
.md-typeset table:not([class]) td:first-child {
  color: var(--sml-text);
  font-family: var(--md-code-font);
  font-size: 0.79rem;
  font-weight: 600;
  white-space: nowrap;
}

/* Alternating row tint */
.md-typeset table:not([class]) tr:nth-child(even) td {
  background-color: rgba(43, 116, 216, 0.04);
}

[data-md-color-scheme="default"] .md-typeset table:not([class]) tr:nth-child(even) td {
  background-color: rgba(15, 77, 160, 0.03);
}

/* Inline code inside table cells */
.md-typeset table:not([class]) td code {
  color: var(--sml-accent-hi);
  background-color: var(--sml-accent-d);
  border-color: transparent;
  font-weight: 600;
}

/* ── TOC sidebar ──────────────────────────────────────────── */
.md-nav--secondary .md-nav__title {
  font-family: var(--md-code-font);
  font-size: 0.60rem;
  letter-spacing: 0.14em;
  color: var(--sml-text-3);
}

.md-nav--secondary .md-nav__link {
  font-size: 0.80rem;
  color: var(--sml-text-2);
}

.md-nav--secondary .md-nav__link--active {
  color: var(--sml-accent-hi);
  border-left-color: var(--sml-accent);
  font-weight: 600;
}

/* ── Footer ───────────────────────────────────────────────── */
.md-footer {
  background-color: var(--sml-bg-1);
  border-top: 1px solid var(--sml-border);
}

.md-footer-meta {
  background-color: var(--md-footer-bg-color--dark);
}

.md-footer__link { border-top: 1px solid var(--sml-border); }
.md-footer__link:hover { background-color: var(--sml-bg-2); }
.md-footer__title { color: var(--sml-text); font-size: 0.9rem; font-weight: 600; }
.md-footer__direction {
  font-family: var(--md-code-font);
  font-size: 0.60rem;
  letter-spacing: 0.1em;
  color: var(--sml-text-3);
  text-transform: uppercase;
}

/* ── Search ───────────────────────────────────────────────── */
.md-search__form {
  background-color: var(--sml-bg-2);
  border: 1px solid var(--sml-border);
  border-radius: 5px;
  transition: border-color 120ms;
}

.md-search__form:focus-within {
  border-color: var(--sml-accent);
  box-shadow: 0 0 0 3px var(--sml-accent-d);
}

.md-search__input {
  font-family: var(--md-code-font);
  font-size: 0.80rem;
  color: var(--sml-text);
}

.md-search-result__article,
.md-search-result__meta { background-color: var(--sml-bg-1); }
.md-search-result__link:hover { background-color: var(--sml-bg-2); }

/* ── Scrollbar ────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--sml-bg); }
::-webkit-scrollbar-thumb { background: var(--sml-border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--sml-text-3); }

/* ── Section tag strip (monospace breadcrumb at top of pages) */
.md-typeset > p > code:first-child {
  display: inline-block;
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sml-text-3);
  background: transparent;
  border: none;
  padding: 0;
  margin-bottom: 0.6rem;
}

/* ── Spec strip component ─────────────────────────────────── */
.sml-spec-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  border: 1px solid var(--sml-border);
  border-radius: 5px;
  overflow: hidden;
  margin-bottom: 2rem;
  background: var(--sml-border);
  gap: 1px;
}

.sml-spec-strip__cell {
  padding: 0.8rem 1.1rem;
  background-color: var(--sml-bg-1);
}

.sml-spec-strip__key {
  font-family: var(--md-code-font);
  font-size: 0.58rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sml-text-3);
  display: block;
}

.sml-spec-strip__val {
  font-family: var(--md-code-font);
  font-size: 0.82rem;
  color: var(--sml-text);
  display: block;
  margin-top: 0.3rem;
  font-weight: 600;
}