/* AML Open Framework — brand theme overrides on MkDocs Material.
 *
 * Inherits the visual language from the existing board deck at
 * tomqwu.github.io/aml_open_framework_docs/ — off-white parchment,
 * ink, and a rust/terracotta accent. Material's default indigo
 * palette feels generic next to the deck; this stylesheet rewires
 * the CSS custom properties so the engineering docs and the deck
 * read as one product.
 */

@import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,wght@0,400;0,600;1,400&display=swap');

:root {
  /* Surfaces (light mode) */
  --aml-bg: #fbfbfc;
  --aml-bg-cream: #fdfbf5;
  --aml-bg-accent: #fdeee5;
  --aml-divider: #c8cfd6;

  /* Ink */
  --aml-ink: #1c1f26;
  --aml-ink-soft: #2b3641;
  --aml-ink-mute: #5f6b78;
  --aml-ink-faint: #9aa3ad;

  /* Accent — rust / terracotta */
  --aml-accent: #dd5c34;
  --aml-accent-deep: #a44b30;
  --aml-accent-bg: #fdeee5;
  /* Lighter rust for use on dark backgrounds — hits WCAG 4.5:1 on
   * `#1c2333` (the L2 nav slate bg) at 6.49:1. Same brand-rust hue,
   * just enough chroma lift to clear the contrast threshold. */
  --aml-accent-light: #ef8d68;

  /* Cyan signal (used sparingly for "live" indicators) */
  --aml-signal: #67e8f9;

  /* Fonts */
  --aml-font-sans: 'Inter', -apple-system, system-ui, sans-serif;
  --aml-font-serif: 'Source Serif 4', 'Source Serif Pro', Georgia, serif;
  --aml-font-mono: 'JetBrains Mono', ui-monospace, Menlo, monospace;
}

/* ── Material palette overrides ─────────────────────────────────── */

[data-md-color-scheme="default"] {
  --md-primary-fg-color: var(--aml-ink);
  --md-primary-fg-color--light: var(--aml-ink-soft);
  --md-primary-fg-color--dark: #0a0e1a;
  --md-primary-bg-color: var(--aml-bg);
  --md-primary-bg-color--light: var(--aml-bg-cream);

  --md-accent-fg-color: var(--aml-accent);
  --md-accent-fg-color--transparent: var(--aml-accent-bg);
  --md-accent-bg-color: var(--aml-accent);

  --md-default-bg-color: var(--aml-bg);
  --md-default-fg-color: var(--aml-ink);
  --md-default-fg-color--light: var(--aml-ink-mute);
  --md-default-fg-color--lighter: var(--aml-ink-faint);

  --md-typeset-color: var(--aml-ink);
  --md-typeset-a-color: var(--aml-accent-deep);

  --md-code-bg-color: #f6f7f9;
  --md-code-fg-color: var(--aml-ink-soft);

  --md-footer-bg-color: var(--aml-ink);
  --md-footer-bg-color--dark: #0a0e1a;
}

[data-md-color-scheme="slate"] {
  --md-primary-fg-color: #0a0e1a;
  --md-primary-bg-color: #f6f7f9;
  --md-accent-fg-color: var(--aml-accent);
  --md-default-bg-color: #0a0e1a;
  --md-default-fg-color: #e8eaef;
  --md-typeset-a-color: #f0a085;
  --md-code-bg-color: #1c1f26;
}

/* ── Typography ─────────────────────────────────────────────────── */

body,
.md-typeset {
  font-family: var(--aml-font-sans);
  font-feature-settings: "kern" 1, "liga" 1;
}

/* Editorial italic accents inside headings — `<em>` inside h1/h2
 * becomes the deck's signature serif italic. */
.md-typeset h1 em,
.md-typeset h2 em {
  font-family: var(--aml-font-serif);
  font-style: italic;
  font-weight: 400;
  color: var(--aml-accent-deep);
  letter-spacing: -0.01em;
}

.md-typeset h1 {
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
  font-size: 2.5rem;
  color: var(--aml-ink);
}

.md-typeset h2 {
  font-weight: 700;
  letter-spacing: -0.015em;
  margin-top: 2.5rem;
  border-bottom: 1px solid var(--aml-divider);
  padding-bottom: 0.4rem;
}

.md-typeset code {
  font-family: var(--aml-font-mono);
  font-size: 0.85em;
  background: var(--md-code-bg-color);
  padding: 0.15em 0.4em;
  border-radius: 3px;
}

/* ── Deck-style hero block ──────────────────────────────────────── */

.aml-hero {
  margin: 0 -1.2rem 2.5rem;
  padding: 2.4rem 1.6rem 2.4rem;
  background: linear-gradient(180deg, var(--aml-bg-cream) 0%, var(--aml-bg) 100%);
  border-bottom: 1px solid var(--aml-divider);
}

.aml-eyebrow {
  font-family: var(--aml-font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--aml-accent-deep);
  margin-bottom: 0.8rem;
}

.aml-hero h1 {
  margin: 0 0 0.8rem;
  font-size: clamp(1.8rem, 4vw, 3rem);
  line-height: 1.05;
  letter-spacing: -0.025em;
}

.aml-lede {
  font-size: 1.05rem;
  line-height: 1.55;
  color: var(--aml-ink-soft);
  max-width: 56ch;
  margin: 0;
}

.aml-lede strong {
  color: var(--aml-ink);
  font-weight: 600;
}

/* ── Door cards (replace Material grid cards visually) ──────────── */

.md-typeset .grid.cards {
  gap: 1rem;
}

.md-typeset .grid.cards > * {
  border: 1px solid var(--aml-divider);
  border-radius: 4px;
  background: var(--aml-bg);
  transition: border-color 0.15s, transform 0.15s;
  padding: 1.3rem 1.4rem;
  position: relative;
}

.md-typeset .grid.cards > *:hover {
  border-color: var(--aml-accent);
  transform: translateY(-1px);
}

/* The first card in a section gets a left rust border-accent —
 * makes the "primary door" visually pop in the door grid. */
.md-typeset .grid.cards > *:first-child {
  border-left: 3px solid var(--aml-accent);
  padding-left: 1.2rem;
}

.md-typeset .grid.cards .twemoji.lg.middle,
.md-typeset .grid.cards svg.twemoji {
  color: var(--aml-accent);
}

/* ── Tabs / navigation ──────────────────────────────────────────── */

.md-tabs {
  background: var(--aml-ink);
  border-bottom: 1px solid var(--aml-divider);
}

.md-tabs__link {
  font-family: var(--aml-font-sans);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  opacity: 0.85;
}

.md-tabs__link--active {
  opacity: 1;
  border-bottom: 2px solid var(--aml-accent);
}

.md-header {
  background: var(--aml-ink);
  box-shadow: 0 1px 0 var(--aml-divider);
}

.md-header__title {
  font-family: var(--aml-font-sans);
  font-weight: 600;
  letter-spacing: -0.005em;
}

/* ── Search box ─────────────────────────────────────────────────── */

.md-search__form {
  background: rgba(255, 255, 255, 0.08);
  border-radius: 4px;
}

.md-search__input::placeholder {
  color: rgba(255, 255, 255, 0.5);
}

/* ── Footer ─────────────────────────────────────────────────────── */

.md-footer-meta {
  background: #0a0e1a;
}

/* ── Admonition rust accent ─────────────────────────────────────── */

.md-typeset .admonition.note,
.md-typeset .admonition.info {
  border-left-color: var(--aml-accent);
}

.md-typeset .admonition.note > .admonition-title::before,
.md-typeset .admonition.info > .admonition-title::before {
  background-color: var(--aml-accent);
}

/* ── Small refinements ──────────────────────────────────────────── */

.md-typeset a {
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.1s;
}

.md-typeset a:hover {
  border-bottom-color: var(--aml-accent);
}

.md-typeset blockquote {
  border-left: 3px solid var(--aml-accent);
  background: var(--aml-bg-accent);
  padding: 0.8rem 1.2rem;
  color: var(--aml-ink-soft);
  font-family: var(--aml-font-serif);
  font-size: 1.05rem;
  line-height: 1.5;
}

/* ── Release chip — version + tag summary next to the wordmark ──── */
/* Mirrors the dashboard topbar (`dashboard/components.py:248-291`).
 * Markup is in `overrides/partials/header.html`; env-injected at
 * docs-deploy time so each published rebuild stamps "v0.1.42 · Round
 * 32 close: ..." into the header. Hidden on phone widths so it doesn't
 * compete with the brand for the narrow top row. */

.md-header__release {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-left: 10px;
  font-family: var(--aml-font-mono);
  color: rgba(255, 255, 255, 0.78);
  white-space: nowrap;
  overflow: hidden;
  min-width: 0;
  flex-shrink: 1;
}

.md-header__release-tag {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.02em;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.92);
}

.md-header__release-summary {
  font-family: var(--aml-font-serif);
  font-style: italic;
  font-size: 12px;
  max-width: 360px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1;
}

.md-header__release-summary::before {
  content: "·";
  margin-right: 10px;
  color: rgba(255, 255, 255, 0.5);
}

@media screen and (max-width: 60em) {
  .md-header__release-summary {
    display: none;
  }
}

@media screen and (max-width: 30em) {
  .md-header__release {
    display: none;
  }
}

/* ── R32 follow-up · Clickable header title (wordmark → home) ───── */
/* The `overrides/partials/header.html` template wraps the site-name
 * topic in an `<a>` to the home URL (Material's stock template leaves
 * it as a plain div). These rules style it so it visually inherits
 * the title typography but gains the affordances of a link. */

.md-header__topic--home {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  transition: opacity 0.15s;
}

.md-header__topic--home:hover {
  opacity: 0.75;
}

/* Codex P2 on PR #448 — a11y. When Material scrolls the page enough
 * that `.md-header__title--active` switches topics (site-name slides
 * up, page-title slides in), Material relies on transform+opacity to
 * hide the first topic but it stays in the DOM tree — keyboard users
 * could tab to an invisible "Home" link. `visibility: hidden` removes
 * the element from the tab order (and from a11y tree) once scrolled;
 * the fade animation is cut short but the home link is no longer a
 * focusable phantom. */
.md-header__title--active .md-header__topic--home {
  visibility: hidden;
}

/* ── R32 follow-up · Level-2 horizontal nav + hide primary sidebar ── */
/* The custom override at overrides/partials/tabs.html adds a second
 * `.md-tabs--secondary` element under the standard tabs bar. This block
 * styles it as a quieter sub-band and hides Material's left sidebar on
 * desktop so the content column gets the full center width. Mobile is
 * untouched — Material's hamburger drawer still shows the full nav. */

.md-tabs--secondary {
  background-color: var(--aml-bg-cream);
  border-top: 1px solid rgba(28, 31, 38, 0.08);
  border-bottom: 1px solid rgba(28, 31, 38, 0.08);
  font-size: 0.72rem;
  color: var(--aml-ink-mute);
}

/* Dark mode (`slate` scheme) — the cream background + opacity-dimmed
 * dark-ink text from the light-mode rules above dissolves the L2 nav
 * into the dark navy header. Explicit overrides give the secondary
 * bar a distinct (but slightly lighter than the main header) band
 * with full-opacity light text so every pill is readable. */
[data-md-color-scheme="slate"] .md-tabs--secondary {
  background-color: #1c2333;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  color: #cbd5e1;
}

[data-md-color-scheme="slate"] .md-tabs--secondary .md-tabs__link {
  color: #cbd5e1;
  opacity: 1;
}

[data-md-color-scheme="slate"] .md-tabs--secondary .md-tabs__link:hover {
  color: var(--aml-accent-light);
}

[data-md-color-scheme="slate"] .md-tabs--secondary .md-tabs__item--active .md-tabs__link {
  /* Codex P3 round 1 — dark-mode active needed a lighter rust to clear
   * WCAG 4.5:1. `--aml-accent` (#dd5c34) on `#1c2333` = 4.23:1 ❌;
   * `--aml-accent-light` (#ef8d68) = 6.49:1 ✅. */
  color: var(--aml-accent-light);
  border-bottom-color: var(--aml-accent-light);
}

[data-md-color-scheme="slate"] .md-tabs--secondary .md-tabs__link--label {
  color: rgba(203, 213, 225, 0.55);
}

[data-md-color-scheme="slate"] .md-tabs--secondary .md-tabs__item--group-label {
  border-left-color: rgba(255, 255, 255, 0.12);
}

.md-tabs--secondary .md-tabs__list {
  /* Allow horizontal scroll on narrow viewports without wrapping. */
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
}

.md-tabs--secondary .md-tabs__list::-webkit-scrollbar {
  display: none;
}

.md-tabs--secondary .md-tabs__item {
  margin: 0;
  white-space: nowrap;
}

.md-tabs--secondary .md-tabs__link {
  opacity: 0.7;
  padding: 0.55rem 1rem;
  font-weight: 500;
  letter-spacing: 0.005em;
  margin: 0;
  border-bottom: 2px solid transparent;
  transition: opacity 0.15s, color 0.15s, border-color 0.15s;
}

.md-tabs--secondary .md-tabs__link:hover {
  opacity: 1;
  color: var(--aml-accent);
}

.md-tabs--secondary .md-tabs__item--active .md-tabs__link {
  opacity: 1;
  color: var(--aml-accent-deep);
  border-bottom-color: var(--aml-accent);
}

/* Nested-section group label (e.g. "Research whitepapers" under Explain).
 * Renders as italic serif so it's visually distinct from the actual links
 * and signals "this is a category, not a destination." */
.md-tabs--secondary .md-tabs__item--group-label {
  margin-left: 1rem;
  padding-left: 1rem;
  border-left: 1px solid rgba(28, 31, 38, 0.12);
}

.md-tabs--secondary .md-tabs__link--label {
  font-family: var(--aml-font-serif);
  font-style: italic;
  font-size: 0.7rem;
  color: var(--aml-ink-faint);
  cursor: default;
  pointer-events: none;
  padding-right: 0.5rem;
  border-bottom: none !important;
}

/* Desktop: hide the primary sidebar entirely — level-2 nav replaces it.
 * Material's breakpoint for showing the persistent left sidebar is
 * `min-width: 76.25em` (1220 px). Below that the sidebar becomes a
 * drawer accessed via the hamburger, which we leave alone. */
@media screen and (min-width: 76.25em) {
  .md-sidebar--primary {
    display: none;
  }

  /* Widen the content grid since the left gutter is gone. The default
   * `--md-grid-max-width` is 61rem; pushing to 76rem gives the content
   * column ~250 px more, the right TOC stays its normal width. */
  .md-grid {
    max-width: 76rem;
  }

  /* Codex P2 round 1 + P3 round 3 — sticky-header offset accounts for
   * the extra level-2 row. Material sets `html { font-size: 125% }`
   * so 1rem = 20px on desktop; explicit `147px` avoids rem-scaling
   * confusion and matches the measured 3-row sticky height (header
   * 49px + tabs 48px + secondary 50px = 147px). Anchor jumps + the
   * right TOC's sticky-top now land flush with the bar's bottom edge. */
  .md-sidebar--secondary {
    top: 147px !important;
  }

  :target,
  .md-typeset :target {
    scroll-margin-top: 147px;
  }

  html {
    scroll-padding-top: 147px;
  }
}