/*
 * Obstruo brand alignment
 * Assessment page tokens: --purple:#8B6FE8  --purple-soft:#B9A6F2
 *   --ink:#0E0E11  --surface:#16161C  --surface-2:#1E1E26
 *   --line:#2A2A34  --text:#ECEAF6  --muted:#8C8C99
 */

[data-md-color-scheme="slate"] {
  /* Brand purple: replaces Material "deep purple" (#651fff) */
  --md-primary-fg-color:        #8B6FE8;
  --md-primary-fg-color--light: #B9A6F2;
  --md-primary-fg-color--dark:  #6B52C8;
  --md-primary-bg-color:        #0E0E11;
  --md-primary-bg-color--light: #1E1E26;

  /* Accent: used for hover states, active nav items */
  --md-accent-fg-color:         #B9A6F2;
  --md-accent-fg-color--transparent: #B9A6F218;

  /* Page background: slightly deeper than default slate */
  --md-default-bg-color:        #0E0E11;
  --md-default-bg-color--light: #16161C;
  --md-default-bg-color--lighter: #1E1E26;
  --md-default-bg-color--lightest: #23232C;

  /* Text */
  --md-default-fg-color:              #ECEAF6;
  --md-default-fg-color--light:       #8C8C99;
  --md-default-fg-color--lighter:     #62626E;
  --md-default-fg-color--lightest:    #3A3A44;

  /* Links */
  --md-typeset-a-color: #B9A6F2;

  /* Code blocks */
  --md-code-bg-color:   #16161C;
  --md-code-fg-color:   #ECEAF6;

  /* Admonitions: keep border purple */
  --md-admonition-fg-color: #ECEAF6;

  /* Mermaid diagram theming */
  --md-mermaid-font-family: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
  --md-mermaid-node-bg-color:    #1E1E26;  /* node fill: surface-2 */
  --md-mermaid-node-fg-color:    #8B6FE8;  /* node border: purple */
  --md-mermaid-edge-color:       #8B6FE8;  /* arrow lines: purple */
  --md-mermaid-label-bg-color:   #16161C;  /* subgraph fill: surface */
  --md-mermaid-label-fg-color:   #ECEAF6;  /* text in labels */
}

/* Monospace font matches Obstruo assessment page */
[data-md-color-scheme="slate"] .md-typeset code,
[data-md-color-scheme="slate"] .md-typeset pre {
  font-family: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
}

/* Nav header background: matches --ink */
[data-md-color-scheme="slate"] .md-header {
  background-color: #0E0E11;
  border-bottom: 1px solid #2A2A34;
}

/* Sidebar + TOC background */
[data-md-color-scheme="slate"] .md-sidebar {
  background-color: #0E0E11;
}

/* Active nav item uses brand purple */
[data-md-color-scheme="slate"] .md-nav__link--active,
[data-md-color-scheme="slate"] .md-nav__link:hover {
  color: #B9A6F2;
}

/* Search box border */
[data-md-color-scheme="slate"] .md-search__form {
  background-color: #16161C;
  border: 1px solid #2A2A34;
}

/* ── Step cards ────────────────────────────────────────────────────────────── */
.md-typeset .obstruo-steps {
  display: grid;
  gap: 10px;
  margin: 20px 0 24px;
}

.md-typeset .obstruo-step {
  display: flex;
  gap: 14px;
  background: #1E1E26;
  border: 1px solid #2A2A34;
  border-radius: 12px;
  padding: 16px 18px;
  align-items: flex-start;
}

.md-typeset .obstruo-step .step-num {
  font-family: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
  color: #8B6FE8;
  font-size: 13px;
  font-weight: 700;
  flex: none;
  min-width: 22px;
  padding-top: 2px;
}

.md-typeset .obstruo-step .step-body strong {
  display: block;
  font-size: 15px;
  color: #ECEAF6;
  margin-bottom: 4px;
  font-weight: 600;
}

.md-typeset .obstruo-step .step-body p {
  margin: 0;
  font-size: 14px;
  color: #8C8C99;
  line-height: 1.5;
}

/* ── Badges / chips ─────────────────────────────────────────────────────────── */
.md-typeset .badge {
  display: inline-block;
  font-family: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
  font-size: 10.5px;
  letter-spacing: .5px;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid;
  vertical-align: middle;
  line-height: 1.6;
}

.md-typeset .badge-plan {
  color: #B9A6F2;
  border-color: #3A3257;
  background: #191527;
}

/* ── Mermaid SVG overrides ───────────────────────────────────────────────────── */
/* Material intercepts Mermaid init, so we override SVG elements directly */

/* Node shapes: fill + border + rounded corners */
.md-typeset .mermaid .node rect,
.md-typeset .mermaid .node circle,
.md-typeset .mermaid .node ellipse,
.md-typeset .mermaid .node polygon,
.md-typeset .mermaid .node path {
  fill:   #1E1E26 !important;
  stroke: #8B6FE8 !important;
  rx: 8px;
  ry: 8px;
}

/* Rounded rect specifically (most common node type) */
.md-typeset .mermaid .node rect {
  rx: 8px !important;
  ry: 8px !important;
}

/* Arrow / edge lines */
.md-typeset .mermaid .edgePath path,
.md-typeset .mermaid .flowchart-link {
  stroke: #8B6FE8 !important;
}

/* Arrowhead fill */
.md-typeset .mermaid .arrowheadPath {
  fill: #8B6FE8 !important;
  stroke: none !important;
}

/* Edge label background */
.md-typeset .mermaid .edgeLabel rect,
.md-typeset .mermaid .edgeLabel .label {
  fill:       #0E0E11 !important;
  background: #0E0E11 !important;
  color:      #B9A6F2 !important;
}

/* Subgraph (cluster) */
.md-typeset .mermaid .cluster rect {
  fill:   #16161C !important;
  stroke: #2A2A34 !important;
  rx: 10px !important;
  ry: 10px !important;
}

/* Subgraph label */
.md-typeset .mermaid .cluster span,
.md-typeset .mermaid .cluster .nodeLabel {
  color: #8C8C99 !important;
}

/* Node text */
.md-typeset .mermaid .nodeLabel,
.md-typeset .mermaid .label {
  color:        #ECEAF6 !important;
  font-family:  ui-monospace, "SF Mono", Menlo, Consolas, monospace !important;
  font-size:    13px !important;
}

/* ── Center all images and diagrams by default ──────────────────────────────── */
/* Center all images and diagrams by default */
.md-typeset img {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

/* Paragraph wrapping a lone image: center it */
.md-typeset p:has(> img:only-child) {
  text-align: center;
}

/* Mermaid: pre before JS render + SVG after render */
.md-typeset pre.mermaid,
.md-typeset pre.mermaid svg {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

/* Material renders mermaid into .mermaid div after processing */
.md-typeset .mermaid {
  text-align: center;
}

.md-typeset figure {
  text-align: center;
}

.md-typeset figure figcaption {
  color: #8C8C99;
  font-size: 0.8em;
  margin-top: 0.4em;
}

/* Free-tier docs banner (injected by javascripts/free-banner.js; free build only).
   Informational only, no call to action. */
.obstruo-free-banner-bar {
  background: var(--md-primary-fg-color, #8B6FE8);
  color: #fff;
  text-align: center;
  padding: 0.5rem 1rem;
  font-size: 0.78rem;
  line-height: 1.4;
}
.obstruo-free-banner-bar strong {
  font-weight: 700;
}