/* Procoder brand palette — see brand/README.md, which is the source of
   truth for these values. Change a color there and here together.

   mkdocs-material's `primary` setting only accepts its own named colors,
   and none of them is #7C3AED, so the brand colors are set directly on
   the theme's custom properties instead of approximated. */

:root {
  --procoder-black: #05070f;
  --procoder-midnight: #0b1020;
  --procoder-purple: #7c3aed;
  --procoder-violet: #9333ea;
  --procoder-blue: #2563eb;
  --procoder-cyan: #06b6d4;
  --procoder-white: #f8fafc;
  --procoder-slate: #94a3b8;
  --procoder-muted: #64748b;
}

/* Light scheme: purple leads, cyan answers. The header stays dark in
   both schemes — the mark is drawn for a dark ground and loses its
   contrast on white. */
[data-md-color-scheme="default"] {
  --md-primary-fg-color: var(--procoder-purple);
  --md-primary-fg-color--light: var(--procoder-violet);
  --md-primary-fg-color--dark: #5b21b6;
  --md-accent-fg-color: var(--procoder-blue);
  --md-typeset-a-color: var(--procoder-purple);
}

[data-md-color-scheme="slate"] {
  --md-primary-fg-color: var(--procoder-purple);
  --md-primary-fg-color--light: var(--procoder-violet);
  --md-primary-fg-color--dark: var(--procoder-black);
  --md-accent-fg-color: var(--procoder-cyan);
  --md-typeset-a-color: #a78bfa;

  --md-default-bg-color: var(--procoder-black);
  --md-code-bg-color: var(--procoder-midnight);
  --md-default-fg-color: var(--procoder-white);
  --md-default-fg-color--light: var(--procoder-slate);
  --md-default-fg-color--lighter: var(--procoder-muted);
}

.md-header,
.md-tabs {
  background-color: var(--procoder-black);
}

/* The signature gradient, used as a hairline rather than a field: energy
   flowing through a restrained interface, never a large area of it. */
.md-header {
  border-bottom: 2px solid transparent;
  border-image: linear-gradient(
      90deg,
      var(--procoder-violet) 0%,
      var(--procoder-purple) 35%,
      var(--procoder-blue) 70%,
      var(--procoder-cyan) 100%
    )
    1;
}

.md-typeset h1,
.md-typeset h2 {
  font-weight: 700;
}

/* Cards and code panels take the brand's border treatment. */
.md-typeset .admonition,
.md-typeset details {
  border-radius: 12px;
  border: 1px solid rgba(148, 163, 184, 0.15);
}

.md-typeset pre > code {
  border-radius: 8px;
}

/* Diagrams. mkdocs-material renders Mermaid client-side and reads these
   custom properties, so the diagrams take the brand palette in both
   schemes instead of Mermaid's defaults. The compile-time theme used by
   `procoder docs` lives in .procoder/docs/mermaid.json — keep the two
   in step. */
[data-md-color-scheme="default"] {
  --md-mermaid-font-family: var(--md-text-font-family), sans-serif;
  --md-mermaid-node-bg-color: #ede9fe;
  --md-mermaid-node-fg-color: var(--procoder-purple);
  --md-mermaid-edge-color: var(--procoder-purple);
  --md-mermaid-label-bg-color: #ede9fe;
  --md-mermaid-label-fg-color: #1e1b31;
}

[data-md-color-scheme="slate"] {
  --md-mermaid-node-bg-color: #241b47;
  --md-mermaid-node-fg-color: #a78bfa;
  --md-mermaid-edge-color: #a78bfa;
  --md-mermaid-label-bg-color: #241b47;
  --md-mermaid-label-fg-color: var(--procoder-white);
}

/* Diagrams are content, not decoration: give them room and let a wide
   one scroll inside its own box rather than stretching the page. */
.md-typeset .mermaid {
  margin: 1.5rem 0;
  overflow-x: auto;
}

/* The banner is the page's own header on the overview — full width, no
   frame competing with it. */
.procoder-banner {
  display: block;
  width: 100%;
  max-width: 100%;
  border-radius: 12px;
  margin: 0 0 1.5rem;
}

/* The command reference's on-page filter. The site search jumps you to
   another page; this narrows the one you are on. */
.procoder-filter {
  margin: 1.25rem 0 2rem;
  padding: 1rem;
  border: 1px solid rgba(148, 163, 184, 0.25);
  border-radius: 12px;
  background: var(--md-code-bg-color);
}

.procoder-filter label {
  display: block;
  margin-bottom: 0.4rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--md-default-fg-color--light);
}

.procoder-filter input[type="search"] {
  width: 100%;
  padding: 0.55rem 0.7rem;
  font-size: 0.85rem;
  font-family: inherit;
  color: var(--md-default-fg-color);
  background: var(--md-default-bg-color);
  border: 1px solid rgba(148, 163, 184, 0.35);
  border-radius: 8px;
}

.procoder-filter input[type="search"]:focus {
  outline: none;
  border-color: var(--procoder-purple);
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.25);
}

.procoder-filter__count {
  margin: 0.5rem 0 0;
  font-size: 0.75rem;
  color: var(--md-default-fg-color--light);
}

.procoder-filter__count:empty {
  display: none;
}

/* A command name is one token: never break `/procoder:agents` across
   two lines. The description column takes the slack. */
.md-typeset table:not([class]) td:first-child code,
.md-typeset table:not([class]) th:first-child {
  white-space: nowrap;
}

/* The `hidden` attribute is display:none in the UA stylesheet, and any
   author rule setting `display` beats it — Material sets one on tables.
   The filter relies on `hidden`, so make it win. */
.md-typeset [hidden] {
  display: none !important;
}