/*
 * Custom theme overrides — match the DCS gateway dark neutral palette.
 *
 * The [data-md-color-scheme="slate"] palette block below is GENERATED from the
 * vendored cndcs-brand manifest (brand/brand.manifest.json) by `make brand`
 * (brand-gen, surface "docs"), between the BEGIN/END markers. Do not hand-edit
 * the values inside the block — change them in the manifest upstream and
 * re-vendor. Everything else in this file consumes those custom properties via
 * var(--md-*); the brand drift gate (CI `brand` job) plus `make
 * lint-docs-brand-hex` keep raw brand hex from creeping back into selector
 * bodies. See brand/README.md.
 *
 * One neutral is intentionally out-of-palette for docs: the 1px hairline
 * border. Material Design has no brand border variable and the docs surface
 * nameMap maps only --md-* tokens, so the few borders below keep the raw
 * neutral (the same value as the gateway --border token). See the cndcs-brand
 * README "Surfaces" notes.
 */

/* ---------- Palette (generated from cndcs-brand) ---------- */
[data-md-color-scheme="slate"] {
  /* BEGIN GENERATED cndcs-brand v1.3.0 */
  --md-default-bg-color: #1a1a1a;
  --md-default-fg-color: #e2e2e2;
  --md-default-fg-color--light: #aaaaaa;
  --md-default-fg-color--lighter: #9a9a9a;
  --md-default-fg-color--lightest: rgba(154, 154, 154, 0.15);

  --md-primary-fg-color: #222222;
  --md-primary-fg-color--light: #2a2a2a;
  --md-primary-fg-color--dark: #141414;
  --md-primary-bg-color: #e2e2e2;
  --md-primary-bg-color--light: #aaaaaa;

  --md-accent-fg-color: #60a5fa;
  --md-accent-fg-color--transparent: rgba(96, 165, 250, 0.1);
  --md-accent-bg-color: #60a5fa;
  --md-accent-bg-color--light: rgba(96, 165, 250, 0.1);

  --md-code-bg-color: #222222;
  --md-code-fg-color: #e2e2e2;
  --md-code-hl-color: rgba(96, 165, 250, 0.15);

  --md-typeset-color: #e2e2e2;
  --md-typeset-a-color: #60a5fa;

  --md-footer-bg-color: #141414;
  --md-footer-bg-color--dark: #111111;
  --md-footer-fg-color: #aaaaaa;
  --md-footer-fg-color--light: #9a9a9a;
  --md-footer-fg-color--lighter: #555555;
  /* END */
}

/* Material's palette stylesheet re-sets --md-typeset-a-color for slate under
 * [data-md-color-scheme=slate][data-md-color-primary=indigo] (primary defaults
 * to indigo when mkdocs.yml sets none), whose two-attribute specificity beats
 * the generated block above. Match it so the brand link color wins (#732). */
[data-md-color-scheme="slate"][data-md-color-primary] {
  --md-typeset-a-color: var(--md-accent-fg-color);
}

/* ---------- Header / Tabs ---------- */
[data-md-color-scheme="slate"] .md-header {
  background-color: var(--md-primary-fg-color);
  border-bottom: 1px solid #3a3a3a;
}

[data-md-color-scheme="slate"] .md-tabs {
  background-color: var(--md-primary-fg-color);
}

/* ---------- Sidebar ---------- */
[data-md-color-scheme="slate"] .md-sidebar {
  background-color: var(--md-default-bg-color);
  border-right: 1px solid #3a3a3a;
}

/* ---------- Navigation ---------- */
[data-md-color-scheme="slate"] .md-nav__link:hover,
[data-md-color-scheme="slate"] .md-nav__link:focus {
  color: var(--md-default-fg-color);
}

[data-md-color-scheme="slate"] .md-nav__link--active {
  color: var(--md-accent-fg-color);
}

/* ---------- Code blocks ---------- */
[data-md-color-scheme="slate"] .md-typeset code {
  background-color: var(--md-primary-fg-color--light);
  color: var(--md-code-fg-color);
}

[data-md-color-scheme="slate"] .md-typeset pre > code {
  background-color: var(--md-code-bg-color);
}

/* ---------- Tables ---------- */
[data-md-color-scheme="slate"] .md-typeset table:not([class]) th {
  background-color: var(--md-primary-fg-color--light);
}

[data-md-color-scheme="slate"] .md-typeset table:not([class]) tr:hover td {
  background-color: rgba(136, 136, 136, 0.1);
}

/* ---------- Admonitions ---------- */
[data-md-color-scheme="slate"] .md-typeset .admonition,
[data-md-color-scheme="slate"] .md-typeset details {
  background-color: var(--md-primary-fg-color);
  border-color: #3a3a3a;
}

/* ---------- IEC 61131-3 ST syntax highlighting ---------- */
/* Matches the gateway ST editor palette (internal/gateway/static/css/base.css).
   Applied to Pygments output for code fences tagged `iec` / `st` / etc.
   The keyword color tracks the brand accent (var(--md-accent-fg-color)); the
   other token colors are product-specific and stay as literals. */
[data-md-color-scheme="slate"] .md-typeset .highlight .k,
[data-md-color-scheme="slate"] .md-typeset .highlight .kd,
[data-md-color-scheme="slate"] .md-typeset .highlight .kr,
[data-md-color-scheme="slate"] .md-typeset .highlight .kn,
[data-md-color-scheme="slate"] .md-typeset .highlight .kt {
  color: var(--md-accent-fg-color);
  font-weight: 600;
}
[data-md-color-scheme="slate"] .md-typeset .highlight .kc,
[data-md-color-scheme="slate"] .md-typeset .highlight .mi,
[data-md-color-scheme="slate"] .md-typeset .highlight .mf,
[data-md-color-scheme="slate"] .md-typeset .highlight .m,
[data-md-color-scheme="slate"] .md-typeset .highlight .o,
[data-md-color-scheme="slate"] .md-typeset .highlight .ow {
  color: #c4b5fd;
}
[data-md-color-scheme="slate"] .md-typeset .highlight .kc {
  font-weight: 600;
}
[data-md-color-scheme="slate"] .md-typeset .highlight .nb {
  color: #f59e0b;
}
[data-md-color-scheme="slate"] .md-typeset .highlight .s,
[data-md-color-scheme="slate"] .md-typeset .highlight .s1,
[data-md-color-scheme="slate"] .md-typeset .highlight .s2 {
  color: #ec4899;
}
[data-md-color-scheme="slate"] .md-typeset .highlight .c,
[data-md-color-scheme="slate"] .md-typeset .highlight .c1,
[data-md-color-scheme="slate"] .md-typeset .highlight .cm {
  color: var(--md-default-fg-color--lighter);
  font-style: italic;
}

/* ---------- Color swatches (UI Color Guide) ---------- */
.md-typeset .swatch {
  display: inline-block;
  width: 2.5em;
  height: 1.2em;
  border: 1px solid #3a3a3a;
  border-radius: 2px;
  vertical-align: middle;
}

/* ---------- Search ---------- */
[data-md-color-scheme="slate"] .md-search__form {
  background-color: var(--md-primary-fg-color--light);
}

[data-md-color-scheme="slate"] .md-search__input::placeholder {
  color: var(--md-default-fg-color--lighter);
}

/* ---------- FBD diagrams and ST views — natural size, capped at content width ---------- */
.md-typeset img.fbd,
.md-typeset img.st {
  max-width: 100%;
  height: auto;
}

/* ---------- Video clips (#659) ----------
   Canonical docs/marketing embed: a <figure class="doc-video"> wrapping a
   <video> (still poster + MP4 source + GIF <img> fallback) and a <figcaption>.
   The poster keeps a gated/remote clip from showing a blank box before play;
   the code-bg fill covers the gap while the poster itself loads. The 1px
   hairline is the same intentional out-of-palette neutral the rest of this
   file uses for borders (see header). See docs/STYLE-GUIDE.md "Video Clips". */
.md-typeset figure.doc-video {
  margin: 1.5em 0;
  text-align: center;
}
.md-typeset figure.doc-video video {
  width: 100%;
  max-width: 960px;
  height: auto;
  border: 1px solid #3a3a3a;
  border-radius: 4px;
  background-color: var(--md-code-bg-color);
}
.md-typeset figure.doc-video figcaption {
  margin-top: 0.5em;
  font-size: 0.8rem;
  color: var(--md-default-fg-color--light);
}

/* ---------- Layout: widen content area on large viewports ----------
   Default Material caps the inner grid at 61rem, leaving a lot of empty
   gutter on wide screens. Nudge it up so tables and code blocks breathe. */
@media screen and (min-width: 76.25em) {
  .md-grid {
    max-width: 72rem;
  }
}

/* ---------- Table of contents: clearer active state ----------
   Default active highlight is a subtle color-only shift. Add a left
   accent bar so the reader can scan "where am I" at a glance. */
[data-md-color-scheme="slate"] .md-nav--secondary .md-nav__link--active {
  color: var(--md-accent-fg-color);
  font-weight: 600;
  border-left: 2px solid var(--md-accent-fg-color);
  padding-left: 0.5rem;
  margin-left: -0.625rem;
}

/* ---------- Edit-this-page icon: tone down link-blue so it reads as UI, not content ---------- */
[data-md-color-scheme="slate"] .md-content__button {
  color: var(--md-default-fg-color--lighter);
}
[data-md-color-scheme="slate"] .md-content__button:hover {
  color: var(--md-accent-fg-color);
}

/* ---------- Mermaid — force dark node-label text on light-fill nodes ----------
   Several diagrams use inline `style X fill:#fff` (and other light fills)
   without an accompanying text color. On the slate dark theme Mermaid
   defaults labels to a light fill color, so text inside the boxes becomes
   nearly invisible (white-on-white). Force dark text on node labels and
   cluster labels only — edge labels and arrow labels continue to inherit
   page foreground (light) so they remain readable on the dark canvas. */
[data-md-color-scheme="slate"] .md-typeset .mermaid .node .nodeLabel,
[data-md-color-scheme="slate"] .md-typeset .mermaid .node .nodeLabel p,
[data-md-color-scheme="slate"] .md-typeset .mermaid .node foreignObject div,
[data-md-color-scheme="slate"] .md-typeset .mermaid .node foreignObject span,
[data-md-color-scheme="slate"] .md-typeset .mermaid .node text,
[data-md-color-scheme="slate"] .md-typeset .mermaid .cluster .nodeLabel,
[data-md-color-scheme="slate"] .md-typeset .mermaid .cluster text {
  color: var(--md-default-bg-color) !important;
  fill: var(--md-default-bg-color) !important;
}