/* SPDX-License-Identifier: AGPL-3.0-only */
/* Shared blue palette; text accents adapt to the reading mode. */
[data-md-color-primary="custom"] {
  --md-primary-fg-color: #4276c8;
  --md-primary-fg-color--light: #e8effb;
  --md-primary-fg-color--dark: #274777;
}

[data-md-color-scheme="default"] {
  --md-default-bg-color: #faf9f6;
  --md-typeset-a-color: #3461a9;
  --md-accent-fg-color: #3461a9;
  --md-accent-fg-color--transparent: #3461a91a;
  --charter-heading-color: #274777;
  --charter-active-bg: #e8effb;
  --charter-focus-bg: #fbe5e5;
  --charter-focus-color: #9b3038;
  --charter-focus-border: #d9a3a7;
}

[data-md-color-scheme="slate"] {
  --md-typeset-a-color: #a6c5ff;
  --md-accent-fg-color: #a6c5ff;
  --md-accent-fg-color--transparent: #a6c5ff1a;
  --charter-heading-color: #c5d8ff;
  --charter-active-bg: #4276c826;
  --charter-focus-bg: #542a32;
  --charter-focus-color: #ffbdc3;
  --charter-focus-border: #a66a73;
}

.md-typeset h1,
.md-typeset h2 {
  color: var(--charter-heading-color);
}

.md-nav__link--active {
  background: var(--charter-active-bg);
}

/* Let the page grid grow with the viewport. */
.md-grid {
  max-width: none;
}

/* ==========================================================================
   Our AI Charter — custom styles
   ========================================================================== */

/* Home-page mission — a prominent hero panel.

   A standard Material admonition renders its body at .64rem (smaller than body
   copy), which made the mission statement look shrunken. This presents it as a
   larger, calmer hero instead. Colours come from the Material palette via CSS
   variables, so the panel adapts to light/dark mode; the plain rgba lines are
   fallbacks for browsers without color-mix(). */
.md-typeset .mission {
  margin: 1.5rem 0 2rem;
  padding: 1.25rem 1.5rem;
  border-radius: .3rem;
  border: 1px solid rgba(66, 118, 200, .25);
  border: 1px solid color-mix(in srgb, var(--md-primary-fg-color) 25%, transparent);
  border-left: .25rem solid var(--md-primary-fg-color);
  background: rgba(66, 118, 200, .06);
  background: color-mix(in srgb, var(--md-primary-fg-color) 6%, transparent);
}

.md-typeset .mission .mission-label {
  display: block;
  margin-bottom: .5rem;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--md-typeset-a-color);
}

.md-typeset .mission p {
  margin: 0;
  font-size: 1.1rem;
  line-height: 1.55;
}

/* Home-page tagline — the positioning line between the title and the mission
   hero. Sized up a notch so it reads as a subtitle rather than body copy. */
.md-typeset .tagline p {
  margin: 0 0 1rem;
  font-size: 1.3rem;
  line-height: 1.4;
}

/* Connected homepage pillars. */
.md-typeset .pillar-list > ol {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: pillar;
}

.md-typeset .pillar-list > ol > li {
  position: relative;
  counter-increment: pillar;
  margin: 0 0 .8rem;
  padding: .85rem 1rem .85rem 2.4rem;
  border-left: 4px solid var(--pillar-border);
  border-radius: 6px;
  background: var(--pillar-background);
}

.md-typeset .pillar-list {
  --pillar-background: #fcf5df;
  --pillar-border: #c9ac49;
}

[data-md-color-scheme="slate"] .md-typeset .pillar-list > ol > li {
  background: color-mix(in srgb, var(--pillar-border) 15%, var(--md-default-bg-color));
}

.md-typeset .pillar-list > ol > li::before {
  content: counter(pillar);
  position: absolute;
  left: .7rem;
  top: 1.05rem;
  font-weight: 700;
  color: var(--md-typeset-a-color);
}

.md-typeset .pillar-list p {
  margin: .2rem 0;
}

.md-typeset .pillar-list > ol > li:has(.pillar-focus) {
  box-shadow: 0 0 0 1px var(--pillar-border), 0 4px 14px rgba(201, 172, 73, .15);
}

.md-typeset .pillar-list p:has(.pillar-focus) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .4rem .75rem;
}

.md-typeset .pillar-focus-badge {
  display: inline-block;
  padding: .15rem .6rem;
  border: 1px solid var(--charter-focus-border);
  border-radius: 999px;
  background: var(--charter-focus-bg);
  color: var(--charter-focus-color);
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .02em;
  line-height: 1.6;
  white-space: normal;
}

.md-typeset .pillar-focus-label {
  font-weight: 400;
}

.md-typeset .pillar-focus-badge:hover,
.md-typeset .pillar-focus-badge:focus-visible {
  color: var(--charter-focus-color);
  text-decoration: underline;
  text-underline-offset: .15em;
}

@media screen and (max-width: 44.9375em) {
  .md-typeset .mission p {
    font-size: 1rem;
  }
  .md-typeset .tagline p {
    font-size: 1.15rem;
  }
}

/* ==========================================================================
   Sidebar navigation — section titles
   ========================================================================== */

/* With navigation.sections, Material renders the collapsible section labels
   at a muted --md-default-fg-color--light. Beside the full-contrast links nested
   under them the headers nearly disappear. Lift them to full-contrast text so
   the section titles read as the clearest items in the tree; the theme's bold
   weight (font-weight: 700) still sets them apart from the regular links, and
   the blue accent stays reserved for the active page. */
.md-nav__item--section > .md-nav__link[for],
.md-nav__item--section > .md-nav__link {
  color: var(--charter-heading-color);
}

/* Companion-post → article separator.

   On the four published pages, the LinkedIn feed/launch post sits above the
   article, divided by a `---` thematic break that renders as an <hr> directly
   before the article's <h1>. Material paints <hr> at 7% opacity, which is
   nearly invisible on the text-only pages (and only catches the eye on pages
   where it borders the grey hashtag code block). Make this one separator a
   clear, full-width rule. Scoped via :has() to an <hr> immediately followed by
   an <h1>, so footer and in-article breaks keep the default light style. */
.md-typeset hr:has(+ h1) {
  border-bottom-color: var(--md-default-fg-color--lighter);
  border-bottom-width: .1rem;
  margin: 2em 0;
}

/* EGA diagrams fit the reading column; narrow screens scroll the
   figure rather than compressing its labels. Mermaid uses a shadow root. */
.md-typeset .ega-flow {
  overflow-x: auto;
  margin: 1em 0;
  padding: 12px;
  background: var(--md-default-bg-color);
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: 8px;
}
.md-typeset .ega-flow .mermaid { min-width: 680px; width: 100%; margin: 0; }
.md-typeset .ega-simple .mermaid { min-width: 0; max-width: 560px; margin: 0 auto; }
.md-typeset .ega-pattern { width: 100%; max-width: none; margin: 1.5em 0; overflow-x: auto; }
.md-typeset .ega-pattern figcaption { width: 100%; max-width: none; margin: 1em 0; text-align: left; }
.md-typeset .ega-pattern img,
.md-typeset img[src$="evidence-gated-agents-before-we-rely-cover.svg"] { display: block; width: 100%; min-width: 720px; max-width: none; height: auto; margin: 0; }
.md-typeset p:has(a > img[src$="evidence-gated-agents-before-we-rely-cover.svg"]) { overflow-x: auto; }
.md-typeset .ega-accountability > ul {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: .6rem;
  padding: 0;
  margin: 1em 0;
  list-style: none;
}
.md-typeset .ega-accountability > ul > li {
  margin: 0;
  padding: .75rem;
  border: 1px solid var(--md-default-fg-color--lighter);
  border-radius: 8px;
  background: var(--md-code-bg-color);
}
@media (max-width: 680px) { .md-typeset .ega-flow { padding: 4px; } }
@media print { .md-typeset .ega-flow .mermaid { min-width: 0; } }