/*
 * Brand skin for the Material theme. The ramps come from brand/tokens.css,
 * which is a copy of the shared portal/PDF tokens — refresh it with
 * `just docs-brand-sync` rather than editing the values here.
 */
[data-md-color-primary="custom"] {
  --md-primary-fg-color: var(--brand-navy);
  --md-primary-fg-color--light: var(--brand-slate-600);
  --md-primary-fg-color--dark: var(--brand-slate-950);
  --md-primary-bg-color: var(--brand-white);
  --md-primary-bg-color--light: var(--brand-slate-200);
}

[data-md-color-accent="custom"] {
  --md-accent-fg-color: var(--brand-yellow-600);
  --md-accent-fg-color--transparent: rgb(254 200 4 / 10%);
  --md-accent-bg-color: var(--brand-ink);
  --md-accent-bg-color--light: var(--brand-slate-800);
}

/* Yellow at step 400 is unreadable as text on the dark surface; 300 clears AA. */
[data-md-color-scheme="slate"][data-md-color-accent="custom"] {
  --md-accent-fg-color: var(--brand-yellow-300);
  --md-accent-bg-color: var(--brand-slate-950);
}

[data-md-color-scheme="default"] {
  --md-default-bg-color: var(--brand-white);
  --md-default-fg-color: var(--brand-ink);
  --md-typeset-a-color: var(--brand-slate-600);
  --md-footer-bg-color: var(--brand-navy);
  --md-footer-bg-color--dark: var(--brand-slate-950);
}

[data-md-color-scheme="slate"] {
  --md-hue: 220;
  --md-typeset-a-color: var(--brand-yellow-300);
  --md-footer-bg-color: var(--brand-slate-950);
}

:root {
  --md-text-font-family: var(--brand-font);
  --md-code-font-family: ui-monospace, "SFMono-Regular", "Consolas", monospace;
}

/* The header rule is the one place the corporate yellow reads as a signature. */
.md-header {
  border-bottom: 3px solid var(--brand-yellow-400);
}

.md-header__button.md-logo img {
  height: 1.4rem;
  width: auto;
}

/*
 * Diagram node colours. The light values live in each diagram's classDef so a
 * page renders standalone; the dark values are here because a classDef cannot
 * react to the palette toggle. Every class used in a diagram needs a rule
 * below, or that node keeps its light fill under the dark theme.
 */
[data-md-color-scheme="slate"] .mermaid {
  --diagram-ext-fill: #7f1d1d;
  --diagram-ext-stroke: #f87171;
  --diagram-vend-fill: #881337;
  --diagram-vend-stroke: #fb7185;
  --diagram-work-fill: #78350f;
  --diagram-work-stroke: #fbbf24;
  --diagram-corebox-fill: #14532d;
  --diagram-corebox-stroke: #4ade80;
  --diagram-plat-fill: #164e63;
  --diagram-plat-stroke: #38bdf8;
  --diagram-store-fill: #1e3a8a;
  --diagram-store-stroke: #60a5fa;
  --diagram-label: #f8fafc;
}

[data-md-color-scheme="slate"] .mermaid .node.ext > :is(rect, circle, ellipse, polygon, path),
[data-md-color-scheme="slate"] .mermaid .node.vend > :is(rect, circle, ellipse, polygon, path),
[data-md-color-scheme="slate"] .mermaid .node.work > :is(rect, circle, ellipse, polygon, path),
[data-md-color-scheme="slate"] .mermaid .node.corebox > :is(rect, circle, ellipse, polygon, path),
[data-md-color-scheme="slate"] .mermaid .node.plat > :is(rect, circle, ellipse, polygon, path),
[data-md-color-scheme="slate"] .mermaid .node.store > :is(rect, circle, ellipse, polygon, path) {
  fill: var(--diagram-fill) !important;
  stroke: var(--diagram-stroke) !important;
}

[data-md-color-scheme="slate"] .mermaid .node.ext {
  --diagram-fill: var(--diagram-ext-fill);
  --diagram-stroke: var(--diagram-ext-stroke);
}

[data-md-color-scheme="slate"] .mermaid .node.vend {
  --diagram-fill: var(--diagram-vend-fill);
  --diagram-stroke: var(--diagram-vend-stroke);
}

[data-md-color-scheme="slate"] .mermaid .node.work {
  --diagram-fill: var(--diagram-work-fill);
  --diagram-stroke: var(--diagram-work-stroke);
}

[data-md-color-scheme="slate"] .mermaid .node.corebox {
  --diagram-fill: var(--diagram-corebox-fill);
  --diagram-stroke: var(--diagram-corebox-stroke);
}

[data-md-color-scheme="slate"] .mermaid .node.plat {
  --diagram-fill: var(--diagram-plat-fill);
  --diagram-stroke: var(--diagram-plat-stroke);
}

[data-md-color-scheme="slate"] .mermaid .node.store {
  --diagram-fill: var(--diagram-store-fill);
  --diagram-stroke: var(--diagram-store-stroke);
}

/* The label sits in a foreignObject on flowcharts and as text on other
   diagram types, so both need the light foreground. */
[data-md-color-scheme="slate"] .mermaid .node .label,
[data-md-color-scheme="slate"] .mermaid .node .label * {
  color: var(--diagram-label) !important;
}

[data-md-color-scheme="slate"] .mermaid .node text,
[data-md-color-scheme="slate"] .mermaid .node tspan {
  fill: var(--diagram-label) !important;
}

/* The swatches in the diagram legend, kept beside the node colours they
   explain so the two cannot drift apart. */
.diagram-key {
  display: inline-block;
  width: 0.8rem;
  height: 0.8rem;
  border: 0.05rem solid;
  border-radius: 0.15rem;
  vertical-align: -0.1rem;
}

.diagram-key-ext { background: #f9d6d6; border-color: #b04; }
.diagram-key-vend { background: #fde8e8; border-color: #b04; }
.diagram-key-work { background: #fdf0d5; border-color: #b45309; }
.diagram-key-corebox { background: #cfeec9; border-color: #2a6; }
.diagram-key-plat { background: #e0f0ff; border-color: #268; }
.diagram-key-store { background: #dbe4ff; border-color: #3949ab; }

[data-md-color-scheme="slate"] .diagram-key-ext { background: #7f1d1d; border-color: #f87171; }
[data-md-color-scheme="slate"] .diagram-key-vend { background: #881337; border-color: #fb7185; }
[data-md-color-scheme="slate"] .diagram-key-work { background: #78350f; border-color: #fbbf24; }
[data-md-color-scheme="slate"] .diagram-key-corebox { background: #14532d; border-color: #4ade80; }
[data-md-color-scheme="slate"] .diagram-key-plat { background: #164e63; border-color: #38bdf8; }
[data-md-color-scheme="slate"] .diagram-key-store { background: #1e3a8a; border-color: #60a5fa; }

.doc-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: -0.25rem 0 1.25rem;
}

.doc-meta span {
  padding: 0.18rem 0.55rem;
  border: 0.05rem solid var(--md-default-fg-color--lighter);
  border-radius: 999px;
  background: var(--md-code-bg-color);
  color: var(--md-default-fg-color--light);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.md-typeset .grid.cards > ul > li {
  transition: border-color 125ms, box-shadow 125ms, transform 125ms;
}

.md-typeset .grid.cards > ul > li:hover {
  border-color: var(--md-accent-fg-color);
  box-shadow: var(--md-shadow-z2);
  transform: translateY(-0.08rem);
}

.md-typeset__table {
  width: 100%;
}

.md-typeset__table table:not([class]) {
  display: table;
  width: 100%;
}