/* ============================================================
   QUBITAL DOCS 
   PGF Now · #4386B5 blue · wide layout · blurred header
   ============================================================ */

/* ── PGF Now @font-face ──────────────────────────────────── */
@font-face {
  font-family: 'PGF Now';
  src: url('PGFNOW/PGF-Now-Light.otf') format('opentype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'PGF Now';
  src: url('PGFNOW/PGF-Now-LightItalic.otf') format('opentype');
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'PGF Now';
  src: url('PGFNOW/PGF-Now-Book.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'PGF Now';
  src: url('PGFNOW/PGF-Now-BookItalic.otf') format('opentype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'PGF Now';
  src: url('PGFNOW/PGF-Now-Medium.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'PGF Now';
  src: url('PGFNOW/PGF-Now-MediumItalic.otf') format('opentype');
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'PGF Now';
  src: url('PGFNOW/PGF-Now-Bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'PGF Now';
  src: url('PGFNOW/PGF-Now-BoldItalic.otf') format('opentype');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'PGF Now';
  src: url('PGFNOW/PGF-Now-Black.otf') format('opentype');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'PGF Now';
  src: url('PGFNOW/PGF-Now-BlackItalic.otf') format('opentype');
  font-weight: 900;
  font-style: italic;
  font-display: swap;
}

/* ── Design tokens ───────────────────────────────────────── */
:root {
  --sq-accent:         #4386B5;
  --sq-accent-hover:   #3572a0;
  --sq-accent-soft:    rgba(67, 134, 181, 0.12);
  --sq-accent-softer:  rgba(67, 134, 181, 0.06);

  --sq-bg:             #ffffff;
  --sq-bg-sidebar:     #fafafa;
  --sq-bg-elevated:    #f5f5f5;
  --sq-fg:             #111111;
  --sq-fg-muted:       #555555;
  --sq-fg-subtle:      #888888;
  --sq-border:         #e8e8e8;
  --sq-border-strong:  #d0d0d0;

  --sq-code-bg:        #0d1117;
  --sq-code-fg:        #c9d1d9;
  --sq-code-border:    #21262d;
  --sq-code-inline-bg: #f0f4f8;
  --sq-code-inline-fg: #2c6ea0;

  /* MODIFIED: Header bg — semi-transparent for frosted glass effect */
  --sq-header-bg:      rgba(255, 255, 255, 0.6); 
  --sq-header-height:  59px;
  --sq-sidebar-w:      20rem;
  --sq-radius-sm:      6px;
  --sq-radius:         10px;
  --sq-radius-lg:      14px;
}

[data-md-color-scheme="slate"] {
  --sq-accent:         #5b9fd4;
  --sq-accent-hover:   #7ab5e3;
  --sq-accent-soft:    rgba(91, 159, 212, 0.15);
  --sq-accent-softer:  rgba(91, 159, 212, 0.07);

  --sq-bg:             #0f0f11;
  --sq-bg-sidebar:     #0f0f11;
  --sq-bg-elevated:    #1a1a1e;
  --sq-fg:             #ffffff;
  --sq-fg-muted:       #b9b9b9;
  --sq-fg-subtle:      #666666;
  --sq-border:         #222226;
  --sq-border-strong:  #2e2e34;

  --sq-code-inline-bg: #1c1c22;
  --sq-code-inline-fg: #7ab5e3;
  /* MODIFIED: Header bg — semi-transparent for frosted glass effect */
  --sq-header-bg:      rgba(15, 15, 17, 0.6);
}

/* ── Material bridge ─────────────────────────────────────── */
[data-md-color-scheme="default"] {
  --md-default-bg-color:          var(--sq-bg);
  --md-default-fg-color:          var(--sq-fg);
  --md-default-fg-color--light:   var(--sq-fg-muted);
  --md-default-fg-color--lighter: var(--sq-fg-subtle);
  --md-typeset-a-color:           var(--sq-accent);
  --md-accent-fg-color:           var(--sq-accent);
  --md-accent-fg-color--transparent: var(--sq-accent-soft);
  --md-primary-fg-color:          var(--sq-bg);
  --md-primary-bg-color:          var(--sq-fg);
}

[data-md-color-scheme="slate"] {
  --md-default-bg-color:          var(--sq-bg);
  --md-default-fg-color:          var(--sq-fg);
  --md-default-fg-color--light:   var(--sq-fg-muted);
  --md-typeset-a-color:           var(--sq-accent);
  --md-accent-fg-color:           var(--sq-accent);
  --md-primary-fg-color:          var(--sq-bg);
  --md-primary-bg-color:          var(--sq-fg);
}

/* ── Font stack ──────────────────────────────────────────── */
body, .md-typeset, input, button, select, textarea {
  font-family: 'PGF Now', system-ui, -apple-system, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── Layout: wider grid ──────────────────────────────────── */
.md-grid {
  max-width: 88rem;
}

/* Left sidebar width */
:root {
  --md-sidebar-width: var(--sq-sidebar-w);
}

.md-sidebar--primary {
  width: var(--sq-sidebar-w);
}

/* ── Header: same bg as page, thin border ────────────────── */
.md-header {
  background-color: var(--sq-header-bg) !important;
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  border-bottom: 1px solid var(--sq-border);
  box-shadow: none;
  height: var(--sq-header-height);
  position: sticky;
  top: 0;
  z-index: 100;
}

/* Header inner row — logo left, search center, dark mode right */
.md-header__inner {
  display: flex;
  align-items: center;
  position: relative;
  height: 100%;
}

/* Search container — absolutely centred in navbar */
.md-header .md-search {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 20rem;
  transition: width 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Expanded search — grow from center, not left */
[data-md-toggle="search"]:checked ~ .md-header .md-search {
  width: 36rem;
}

/* Dark mode toggle — push to far right */
.md-header .md-header__option {
  margin-left: auto;
  order: 99;
}

/* Header icons/text match page foreground */
.md-header .md-header__button,
.md-header .md-header__topic,
.md-header .md-icon {
  color: var(--sq-fg) !important;
}

/* Hide "Qubital Docs" site name text — logo carries the brand */
.md-header__title,
.md-header__ellipsis {
  display: none !important;
}

/* MODIFIED: Remove repo name from navbar */
.md-header__source {
  display: none;
}

/* MODIFIED: Remove site/repo name from sidebar source */
.md-source {
  display: none !important;
}

/* MODIFIED: Remove Qubital Docs bar under the navbar (Tabs) */
.md-tabs {
  display: none !important;
  height: 0 !important;
  overflow: hidden !important;
}

/* Logo sizing */
.md-header__button.md-logo {
  padding: 0 0.5rem;
}
.md-header__button.md-logo img,
.md-header__button.md-logo svg {
  height: 24px;
  width: auto;
}

/* Invert white logo to black in light mode */
[data-md-color-scheme="default"] .md-header__button.md-logo img,
[data-md-color-scheme="default"] .md-header__button.md-logo svg {
  filter: invert(1);
}

/* Search — centered box, matching radius */
.md-search__form {
  background-color: var(--sq-bg-elevated);
  border: 1px solid var(--sq-border);
  border-radius: var(--sq-radius-lg);
  height: 36px;
  width: 100%;
  transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.md-search__form:hover {
  background-color: var(--sq-bg-elevated);
  border-color: var(--sq-border-strong);
}
.md-search__form:focus-within {
  background-color: var(--sq-bg);
  border-color: var(--sq-accent);
  box-shadow: 0 0 0 3px rgba(67, 134, 181, 0.15);
}
.md-search__input {
  font-family: 'PGF Now', sans-serif;
  font-size: 0.8125rem;
  color: var(--sq-fg);
  padding-left: 1rem;
}
.md-search__input::placeholder { color: var(--sq-fg-subtle); }

/* Hide "Type to continue searching" label */
.md-search__output .md-search-result__meta {
  display: none;
}
[data-md-toggle="search"]:checked ~ .md-header .md-search__input::placeholder {
  color: transparent;
}

/* Search results dropdown — rounded corners, no square box */
.md-search__output {
  border-radius: var(--sq-radius-lg);
  overflow: hidden;
  border: 1px solid var(--sq-border);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
  margin-top: 0.5rem;
}
.md-search-result {
  background-color: var(--sq-bg);
}
.md-search-result__meta {
  background-color: var(--sq-bg-elevated);
}

/* Search overlay — transparent clickable label to close search */
.md-search__overlay {
  background: transparent !important;
  background-color: transparent !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  opacity: 1 !important;
  pointer-events: none;
  z-index: 200;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  transform: none !important;
}
[data-md-toggle="search"]:checked ~ .md-header .md-search__overlay {
  pointer-events: auto;
  cursor: pointer;
}
/* When search is open, remove backdrop-filter from header so overlay escapes stacking context */
[data-md-toggle="search"]:checked ~ .md-header {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background-color: var(--sq-bg) !important;
}
/* Search inner + form must sit above the overlay */
.md-search__inner {
  background: transparent !important;
  box-shadow: none !important;
  position: relative;
  z-index: 201;
}

/* Ensure expanded search form keeps rounded corners and stays centered */
[data-md-toggle="search"]:checked ~ .md-header .md-search__form {
  border-radius: var(--sq-radius-lg);
  background-color: var(--sq-bg);
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.15);
  width: 100%;
}

/* Keep search inner from shifting layout on expand */
[data-md-toggle="search"]:checked ~ .md-header .md-search__inner {
  width: 100%;
}
/* Blur the main content when search is active */
[data-md-toggle="search"]:checked ~ .md-container {
  filter: blur(4px);
  pointer-events: none;
  transition: filter 0.2s;
}

/* Progress bar */
.md-progress {
  background: var(--sq-accent);
  height: 2px;
}

/* ── Typography ──────────────────────────────────────────── */
.md-typeset {
  font-size: 0.8125rem;  /* ≈13px — compact like Spotify docs */
  line-height: 1.65;
  color: var(--sq-fg-muted);
}

.md-typeset h1,
.md-typeset h1 span {
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.2;
  margin: 0 0 0.75rem;
  color: var(--sq-fg) !important;
}

.md-typeset h2,
.md-typeset h2 span {
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.3;
  margin-top: 2.25rem;
  margin-bottom: 0.5rem;
  border-bottom: none;
  color: var(--sq-fg) !important;
}

.md-typeset h3,
.md-typeset h3 span {
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-top: 1.75rem;
  margin-bottom: 0.4rem;
  color: var(--sq-fg) !important;
}

.md-typeset h4,
.md-typeset h4 span {
  font-size: 0.85rem;
  font-weight: 600;
  margin-top: 1.25rem;
  color: var(--sq-fg) !important;
}

.md-typeset p,
.md-typeset li {
  color: var(--sq-fg-muted);
  font-size: 0.8125rem;
}

.md-typeset a {
  color: var(--sq-accent);
  text-decoration: none;
  font-weight: 500;
  transition: color 0.12s;
}
.md-typeset a:hover {
  color: var(--sq-accent-hover);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.md-typeset strong { font-weight: 700; }

/* ── Left sidebar ────────────────────────────────────────── */
.md-sidebar--primary {
  background-color: var(--sq-bg-sidebar);
  border-right: none;
}

.md-sidebar--primary .md-sidebar__scrollwrap {
  padding: 1.25rem 0.5rem 2rem;
}

/* Kill redundant top nav title ("Qubital Docs" sticky label) */
.md-sidebar--primary > .md-sidebar__scrollwrap > .md-nav > .md-nav__title {
  display: none;
}
.md-nav--primary > .md-nav__title {
  display: none !important;
  height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
}
.md-nav--primary > .md-nav__title[for="__drawer"] {
  display: none !important;
}

/* All nav links — uniform height, allow wrap */
.md-nav__link {
  font-size: 0.8rem;
  font-weight: 400;
  color: var(--sq-fg-muted);
  padding: 0.4rem 0.625rem;
  margin: 1px 0;
  border-radius: var(--sq-radius-lg);
  transition: background-color 0.12s, color 0.12s;
  display: flex;
  align-items: center;
  line-height: 1.4;
  min-height: 2rem;
}

/* Hover: one uniform box */
.md-nav__link:hover {
  background-color: var(--sq-accent-soft);
  color: var(--sq-fg);
}

/* Parent expandable items — semibold */
.md-nav__item--nested > .md-nav__link {
  font-weight: 600;
  color: var(--sq-fg);
}

/* Active page */
.md-nav__link--active,
.md-nav__link--active:hover {
  color: var(--sq-accent);
  font-weight: 600;
  background-color: var(--sq-accent-soft);
}

/* Arrow toggle icon — no separate hover/box, inherits parent hover */
.md-nav__icon {
  margin-left: auto;
  flex-shrink: 0;
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
  border-radius: 0 !important;
}
.md-nav__icon:hover {
  background: none !important;
  box-shadow: none !important;
}
.md-nav__icon.md-icon {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

/* Index links (navigation.indexes): ONLY the outer wrapper gets a box */
.md-nav__link--index {
  display: flex;
  align-items: center;
  padding: 0.4rem 0.625rem;
  margin: 1px 0;
  border-radius: var(--sq-radius-lg);
  min-height: 2rem;
  transition: background-color 0.12s, color 0.12s;
}
.md-nav__link--index:hover {
  background-color: var(--sq-accent-soft);
}

/* Kill ALL inner boxes inside nav links — only the parent .md-nav__link shows */
.md-nav__link a,
.md-nav__link label,
.md-nav__link span,
.md-nav__link--index a,
.md-nav__link--index label,
.md-nav__link--index span {
  background: none !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  outline: none !important;
  padding: 0 !important;
  margin: 0 !important;
  min-height: unset !important;
}
.md-nav__link a:hover,
.md-nav__link label:hover,
.md-nav__link span:hover,
.md-nav__link--index a:hover,
.md-nav__link--index label:hover,
.md-nav__link--index span:hover {
  background: none !important;
  background-color: transparent !important;
  box-shadow: none !important;
  border: none !important;
}

/* Nested nav — indent with left border */
.md-nav .md-nav {
  padding-left: 0.5rem;
  border-left: 1px solid var(--sq-border);
  margin-left: 0.75rem;
  margin-top: 0.15rem;
  margin-bottom: 0.25rem;
}
.md-nav .md-nav .md-nav__link {
  font-size: 0.775rem;
}

/* ── Right TOC ───────────────────────────────────────────── */
.md-sidebar--secondary {
  /* MODIFIED: Remove border to stop double-box effect */
  border-left: none;
}
.md-sidebar--secondary .md-sidebar__scrollwrap {
  padding: 1.25rem 0.875rem 2rem;
}

.md-nav--secondary > .md-nav__title {
  display: none;
}

.md-nav--secondary .md-nav__list {
  display: flex;
  flex-direction: column;
}
.md-nav--secondary .md-nav__item {
  display: block;
  width: 100%;
}
.md-nav--secondary .md-nav__link {
  font-size: 0.775rem;
  padding: 0.15rem 0.5rem;
  margin: 0;
  color: var(--sq-fg-muted);
  border-left: 2px solid transparent;
  border-radius: 0;
  transition: color 0.1s, border-color 0.1s;
  display: block;
  width: 100%;
  box-sizing: border-box;
}
.md-nav--secondary .md-nav__link:hover {
  background: transparent;
  color: var(--sq-fg);
}
.md-nav--secondary .md-nav__link--active {
  background: transparent;
  color: var(--sq-accent);
  border-left-color: var(--sq-accent);
  font-weight: 600;
}

/* ── Content ─────────────────────────────────────────────── */
.md-main__inner {
  margin-top: 1.25rem;
}

/* MODIFIED: Remove container border/box from main article area */
.md-content {
  border: none;
}

.md-content__inner {
  padding: 0 1.75rem 3rem;
  /* MODIFIED: Ensure no box effect on content */
  border: none; 
}
.md-content__inner:before { display: none; }

/* ── Code blocks (always dark) ───────────────────────────── */
.md-typeset pre,
.md-typeset .highlight {
  background-color: var(--sq-code-bg) !important;
  border: 1px solid var(--sq-code-border);
  border-radius: var(--sq-radius-lg);
  box-shadow: none;
  margin: 1rem 0;
}

.md-typeset pre > code,
.md-typeset .highlight pre,
.md-typeset .highlight code {
  background-color: transparent !important;
  color: var(--sq-code-fg);
  font-family: 'JetBrains Mono', 'Fira Code', ui-monospace, monospace;
  font-size: 0.78rem;
  line-height: 1.65;
}

/* Prevent double-box: remove border/margin from pre inside .highlight */
.md-typeset .highlight pre {
  border: none;
  margin: 0;
  border-radius: 0;
}

/* Dracula syntax tokens */
.highlight .k,  .highlight .kd, .highlight .kn { color: #ff79c6; }
.highlight .s,  .highlight .s1, .highlight .s2 { color: #f1fa8c; }
.highlight .c,  .highlight .c1, .highlight .cm { color: #6272a4; font-style: italic; }
.highlight .nb, .highlight .nc, .highlight .nf { color: #8be9fd; }
.highlight .mi, .highlight .mf, .highlight .m  { color: #bd93f9; }
.highlight .o,  .highlight .ow                 { color: #ff79c6; }
.highlight .na, .highlight .nt                 { color: #50fa7b; }

/* Filename label on code block */
.md-typeset .highlight > .filename {
  background-color: #161b22;
  color: #8b949e;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.72rem;
  font-weight: 500;
  padding: 0.45rem 1rem;
  border-bottom: 1px solid var(--sq-code-border);
  border-radius: var(--sq-radius-lg) var(--sq-radius-lg) 0 0;
  letter-spacing: 0.01em;
}

/* Inline code */
.md-typeset :not(pre) > code {
  background-color: var(--sq-code-inline-bg);
  color: var(--sq-code-inline-fg);
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.8em;
  font-weight: 500;
  padding: 0.1em 0.4em;
  border-radius: var(--sq-radius-sm);
  border: 1px solid var(--sq-border);
}

/* Copy button */
.md-clipboard {
  color: rgba(255, 255, 255, 0.3);
  border-radius: var(--sq-radius-sm);
  transition: color 0.12s;
}
.md-clipboard:hover { color: var(--sq-accent); }

/* ── Admonitions ─────────────────────────────────────────── */
.md-typeset .admonition,
.md-typeset details {
  font-size: 0.8rem;
  border-radius: var(--sq-radius-lg);
  border: 1px solid var(--sq-border);
  border-left: 3px solid var(--sq-accent);
  background-color: var(--sq-bg-elevated);
  box-shadow: none;
  margin: 1rem 0;
  padding: 0.15rem 0;
}

.md-typeset .admonition-title,
.md-typeset summary {
  background-color: transparent !important;
  font-weight: 600;
  font-size: 0.8rem;
  padding: 0.45rem 1rem 0.45rem 2.4rem;
}
.md-typeset .admonition-title::before,
.md-typeset summary::before {
  background-color: var(--sq-accent) !important;
}
.md-typeset .admonition > p,
.md-typeset .admonition > ul,
.md-typeset details > p {
  padding: 0.1rem 1rem 0.5rem;
  margin: 0;
}

.md-typeset .warning, .md-typeset .caution {
  border-left-color: #e5a823;
}
.md-typeset .warning > .admonition-title::before,
.md-typeset .caution > .admonition-title::before {
  background-color: #e5a823 !important;
}
.md-typeset .danger, .md-typeset .error {
  border-left-color: #e05252;
}
.md-typeset .danger > .admonition-title::before {
  background-color: #e05252 !important;
}
.md-typeset .tip, .md-typeset .success {
  border-left-color: #3dab79;
}
.md-typeset .tip > .admonition-title::before,
.md-typeset .success > .admonition-title::before {
  background-color: #3dab79 !important;
}

/* ── Tables ──────────────────────────────────────────────── */
.md-typeset table:not([class]) {
  font-size: 0.8rem;
  border: 1px solid var(--sq-border);
  border-radius: var(--sq-radius-lg);
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  box-shadow: none;
  margin: 1rem 0;
}
.md-typeset table:not([class]) th {
  background-color: var(--sq-bg-elevated);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--sq-fg-muted);
  border-bottom: 1px solid var(--sq-border);
  padding: 0.55rem 0.9rem;
}
.md-typeset table:not([class]) td {
  border-color: var(--sq-border);
  padding: 0.55rem 0.9rem;
}

/* ── Footer nav (prev/next) ──────────────────────────────── */
.md-footer {
  background-color: var(--sq-bg);
  border-top: 1px solid var(--sq-border);
}
.md-footer__inner { padding: 1.25rem 1rem; }

.md-footer__link {
  opacity: 1;
  padding: 0.875rem 1rem;
  border: 1px solid var(--sq-border);
  border-radius: var(--sq-radius-lg);
  background-color: var(--sq-bg);
  transition: border-color 0.15s, background-color 0.15s;
}
.md-footer__link:hover {
  border-color: var(--sq-accent);
  background-color: var(--sq-accent-softer);
}
.md-footer__title { font-weight: 600; font-size: 0.8rem; }
.md-footer__direction { font-size: 0.72rem; color: var(--sq-fg-subtle); }

.md-footer-meta {
  background-color: #0a0a0a;
  font-size: 0.75rem;
}

/* ── Page transition ─────────────────────────────────────── */
.md-content__inner {
  animation: sqPageIn 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes sqPageIn {
  from { opacity: 0; transform: translateY(5px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Misc ────────────────────────────────────────────────── */
.md-typeset blockquote {
  border-left: 3px solid var(--sq-accent);
  color: var(--sq-fg-muted);
  font-style: normal;
  padding: 0.2rem 0.875rem;
  margin: 0.875rem 0;
  background-color: var(--sq-accent-softer);
  border-radius: 0 var(--sq-radius-sm) var(--sq-radius-sm) 0;
}
.md-typeset hr {
  border-color: var(--sq-border);
  margin: 1.75rem 0;
}
.md-typeset kbd {
  background-color: var(--sq-bg-elevated);
  border: 1px solid var(--sq-border-strong);
  border-bottom-width: 2px;
  border-radius: var(--sq-radius-sm);
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.78em;
  padding: 0.1em 0.4em;
}

/* ── Scrollbars ──────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--sq-border-strong);
  border-radius: 99px;
}
::-webkit-scrollbar-thumb:hover { background: var(--sq-fg-subtle); }

/* ── Mermaid ─────────────────────────────────────────────── */
/* Pre-rendered SVG containers (built at build time via hook) */
.mermaid-pre-rendered {
  display: flex;
  justify-content: center;
  margin: 1rem 0;
  overflow-x: auto;
}
.mermaid-pre-rendered svg {
  max-width: 100%;
  height: auto;
}

/* Show light variant by default, hide dark */
.mermaid-dark {
  display: none;
}

/* In dark mode: hide light, show dark */
[data-md-color-scheme="slate"] .mermaid-light {
  display: none;
}
[data-md-color-scheme="slate"] .mermaid-dark {
  display: flex;
}

/* ── Selection ───────────────────────────────────────────── */
::selection {
  background-color: var(--sq-accent-soft);
  color: var(--sq-accent);
}