/* ---------- Colours (palette "custom" in mkdocs.yml) ---------- */
:root {
  --pi-ink: #0f1b2d;        /* header */
  --pi-ink-2: #172a45;      /* tab bar */
  --pi-teal: #0d9488;       /* links / accent */
  --pi-teal-hi: #14b8a6;
  --pi-amber: #f59e0b;      /* active tab marker */
}

[data-md-color-scheme="default"] {
  --md-primary-fg-color: var(--pi-ink);
  --md-primary-fg-color--light: var(--pi-ink-2);
  --md-primary-fg-color--dark: #08111f;
  --md-primary-bg-color: #f8fafc;
  --md-accent-fg-color: var(--pi-teal);
  --md-typeset-a-color: var(--pi-teal);
  --md-default-bg-color: #fbfbf9;
  --md-code-bg-color: #f1f4f7;
}

[data-md-color-scheme="slate"] {
  --md-hue: 215;
  --md-primary-fg-color: #0b1422;
  --md-primary-fg-color--light: #13223a;
  --md-primary-fg-color--dark: #060c16;
  --md-primary-bg-color: #e2e8f0;
  --md-accent-fg-color: var(--pi-teal-hi);
  --md-typeset-a-color: #2dd4bf;
  --md-default-bg-color: #0e1724;
  --md-code-bg-color: #142033;
}

/* ---------- Width: use the screen ---------- */
.md-grid {
  max-width: 2000px;
}
@media screen and (min-width: 76.25em) {
  .md-sidebar--primary { width: 15rem; }
  .md-sidebar--secondary { width: 12rem; }
}
.md-typeset img,
.md-typeset svg { max-width: 100%; }
.md-typeset .mermaid { display: flex; justify-content: center; }
.md-typeset table:not([class]) { font-size: .75rem; }

/* ---------- Header + tabs ---------- */
.md-tabs {
  background-color: var(--md-primary-fg-color--light);
}
.md-tabs__link {
  font-size: .75rem;
  font-weight: 600;
  opacity: .75;
}
.md-tabs__item--active .md-tabs__link {
  opacity: 1;
  color: #fff;
  box-shadow: inset 0 -3px 0 var(--pi-amber);
  padding-bottom: .55rem;
}

/* ---------- Sidebar tree ---------- */
.md-nav--primary .md-nav__item--nested > .md-nav__link {
  font-weight: 600;
}
.md-nav--primary .md-nav__item--nested .md-nav {
  border-left: 1px solid var(--md-default-fg-color--lightest);
  margin-left: .6rem;
}
.md-nav__link--active {
  font-weight: 600;
}

/* ---------- Content ---------- */
.md-typeset h1 { font-weight: 700; color: var(--md-default-fg-color); }
.md-typeset h2 {
  font-weight: 650;
  border-bottom: 1px solid var(--md-default-fg-color--lightest);
  padding-bottom: .2em;
}
.md-source-file {
  margin-top: 2.5rem;
  padding: .5rem .8rem;
  border-left: 3px solid var(--md-accent-fg-color);
  background: var(--md-code-bg-color);
  border-radius: 2px;
}