/* Fakel theme layer over Furo 2025.12.19.
   Cascade: furo.css → html_css_files → Furo inline <style> (body{} / body[data-theme]{}).
   Variable blocks use `html:root body` (0,1,2) so they beat both. Dark mode only
   redefines --fk-*; the Furo mapping below resolves through them. */

/* ── Semantic palette: light ─────────────────────────────── */
html:root body {
  --fk-text-strong: var(--fakel-black);
  --fk-text-body: var(--grey-900);
  --fk-text-muted: var(--grey-600);
  --fk-surface-page: var(--fakel-white);
  --fk-surface-sidebar: var(--grey-50);
  --fk-surface-hover: var(--grey-100);
  --fk-surface-code: var(--grey-950);
  --fk-code-text: var(--grey-100);
  --fk-inline-code-bg: var(--grey-100);
  --fk-alert-bg: var(--grey-50);
  --fk-border-subtle: var(--grey-200);
  --fk-border-default: var(--grey-300);
  --fk-border-strong: var(--grey-600);
  --fk-link-underline: var(--grey-300);
  --fk-focus-ring: rgba(224, 0, 52, 0.28);
}

/* ── Semantic palette: dark ──────────────────────────────── */
@media not print {
  html:root body[data-theme="dark"] {
    color-scheme: dark;
    --fk-text-strong: var(--fakel-white);
    --fk-text-body: var(--grey-200);
    --fk-text-muted: var(--grey-400);
    --fk-surface-page: var(--grey-950);
    --fk-surface-sidebar: var(--grey-900);
    --fk-surface-hover: var(--grey-800);
    --fk-surface-code: var(--fakel-black);
    --fk-inline-code-bg: var(--grey-800);
    --fk-alert-bg: var(--grey-900);
    --fk-border-subtle: var(--grey-800);
    --fk-border-default: var(--grey-700);
    --fk-border-strong: var(--grey-500);
    --fk-link-underline: var(--grey-600);
  }
  @media (prefers-color-scheme: dark) {
    html:root body:not([data-theme="light"]) {
      color-scheme: dark;
      --fk-text-strong: var(--fakel-white);
      --fk-text-body: var(--grey-200);
      --fk-text-muted: var(--grey-400);
      --fk-surface-page: var(--grey-950);
      --fk-surface-sidebar: var(--grey-900);
      --fk-surface-hover: var(--grey-800);
      --fk-surface-code: var(--fakel-black);
      --fk-inline-code-bg: var(--grey-800);
      --fk-alert-bg: var(--grey-900);
      --fk-border-subtle: var(--grey-800);
      --fk-border-default: var(--grey-700);
      --fk-border-strong: var(--grey-500);
      --fk-link-underline: var(--grey-600);
    }
  }
}

/* ── Furo variables → Fakel ──────────────────────────────── */
html:root body {
  --font-stack: var(--font-brand);
  --font-stack--headings: var(--font-brand);
  --font-stack--monospace: "PT Mono", "DejaVu Sans Mono", monospace;

  --color-foreground-primary: var(--fk-text-body);
  --color-foreground-secondary: var(--fk-text-muted);
  --color-foreground-muted: var(--fk-text-muted);
  --color-foreground-border: var(--fk-border-default);
  --color-background-primary: var(--fk-surface-page);
  --color-background-secondary: var(--fk-surface-sidebar);
  --color-background-hover: var(--fk-surface-hover);
  --color-background-hover--transparent: transparent;
  --color-background-border: var(--fk-border-subtle);
  --color-background-item: var(--fk-border-strong);
  --color-content-foreground: var(--fk-text-body);
  --color-content-background: transparent;

  --color-brand-primary: var(--fk-text-strong);
  --color-brand-content: var(--fk-text-strong);
  --color-brand-visited: var(--fk-text-strong);

  --color-link: var(--fk-text-strong);
  --color-link--hover: var(--color-accent);
  --color-link--visited: var(--fk-text-strong);
  --color-link--visited--hover: var(--color-accent);
  --color-link-underline: var(--fk-link-underline);
  --color-link-underline--hover: var(--color-accent);
  --color-link-underline--visited: var(--fk-link-underline);
  --color-link-underline--visited--hover: var(--color-accent);

  --color-inline-code-background: var(--fk-inline-code-bg);
  --color-code-background: var(--fk-surface-code);
  --color-code-foreground: var(--fk-code-text);
  --color-highlighted-background: var(--color-accent-tint);
  --color-highlighted-text: var(--fakel-black);
  --color-highlight-on-target: var(--fk-surface-hover);

  --color-header-background: var(--fk-surface-page);
  --color-header-border: var(--fk-border-subtle);
  --color-header-text: var(--fk-text-strong);

  --color-sidebar-background: var(--fk-surface-sidebar);
  --color-sidebar-background-border: var(--fk-border-subtle);
  --color-sidebar-brand-text: var(--fk-text-strong);
  --color-sidebar-caption-text: var(--fk-text-muted);
  --color-sidebar-link-text: var(--fk-text-body);
  --color-sidebar-link-text--top-level: var(--fk-text-strong);
  --color-sidebar-item-background: transparent;
  --color-sidebar-item-background--current: transparent;
  --color-sidebar-item-background--hover: var(--fk-surface-hover);
  --color-sidebar-item-expander-background: transparent;
  --color-sidebar-item-expander-background--hover: var(--fk-surface-hover);
  --color-sidebar-search-background: var(--fk-surface-page);
  --color-sidebar-search-background--focus: var(--fk-surface-page);
  --color-sidebar-search-border: var(--fk-border-default);
  --color-sidebar-search-icon: var(--fk-text-muted);
  --color-sidebar-search-text: var(--fk-text-body);

  --color-toc-background: transparent;
  --color-toc-title-text: var(--fk-text-muted);
  --color-toc-item-text: var(--fk-text-muted);
  --color-toc-item-text--hover: var(--color-accent);
  --color-toc-item-text--active: var(--fk-text-strong);

  --color-table-border: var(--fk-border-subtle);
  --color-table-header-background: transparent;
  --color-card-border: var(--fk-border-subtle);
  --color-card-background: var(--fk-surface-page);
  --color-card-marginals-background: var(--fk-surface-sidebar);

  --sidebar-caption-font-size: 0.6875rem;
  --sidebar-item-font-size: 0.875rem;
  --toc-title-font-size: 0.6875rem;
  --toc-font-size: 0.8125rem;
}

/* ── Base type ───────────────────────────────────────────── */
body {
  font-family: var(--font-brand);
  line-height: var(--lh-normal);
}

article[role="main"] :is(h1, h2, h3, h4, h5, h6) {
  color: var(--fk-text-strong);
  font-family: var(--font-brand);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-tight);
  line-height: var(--lh-snug);
}
article[role="main"] h1 { font-size: var(--text-h1); line-height: 1.2; margin-top: var(--space-6); }
article[role="main"] h2 { font-size: var(--text-h2); margin-top: var(--space-7); }
article[role="main"] h3 { font-size: 1.25rem; margin-top: var(--space-6); }
article[role="main"] :is(h4, h5, h6) { font-size: var(--text-base); margin-top: var(--space-5); }

/* Red stripe above the page title: 10 px, 20 px (two widths) from the text. */
article[role="main"] h1::before {
  content: "";
  display: block;
  width: var(--space-7);
  height: var(--stripe-thickness-lg);
  margin-bottom: calc(var(--stripe-thickness-lg) * 2);
  background: var(--color-accent);
}

a {
  transition:
    color var(--transition-fast),
    text-decoration-color var(--transition-fast),
    background-color var(--transition-fast);
}

/* Focus ring on every interactive element; never removed. */
:is(a, button, summary, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid var(--fk-focus-ring);
  outline-offset: 1px;
}

/* ── Sidebar ─────────────────────────────────────────────── */
.sidebar-brand { padding: var(--space-5) var(--sidebar-item-spacing-horizontal) var(--space-4); }
.sidebar-logo-container { margin: 0; }
.sidebar-logo { display: block; height: 28px; width: auto; max-width: 100%; margin: 0; }

.sidebar-search-container {
  margin: 0 var(--sidebar-item-spacing-horizontal) var(--space-2);
  border: 1px solid var(--fk-border-default);
  border-radius: var(--radius-sm);
  background: var(--fk-surface-page);
  transition: border-color var(--transition-fast);
}
.sidebar-search-container:focus-within {
  border-color: var(--color-accent);
  outline: 3px solid var(--fk-focus-ring);
}
.sidebar-search { border: 0; background: transparent; }

.sidebar-tree .caption,
.sidebar-tree :not(.caption) > .caption-text {
  font-size: 0.6875rem;
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--color-sidebar-caption-text);
}

.sidebar-tree .reference { transition: color var(--transition-fast), background-color var(--transition-fast); }
.sidebar-tree .reference:hover { color: var(--color-accent); }

/* Current page: 3 px red marker, not a fill (web-app.md §1). */
.sidebar-tree .current-page > .reference {
  position: relative;
  font-weight: var(--fw-bold);
  color: var(--fk-text-strong);
}
.sidebar-tree .current-page > .reference::before {
  content: "";
  position: absolute;
  inset: var(--space-1) auto var(--space-1) 0;
  width: 3px;
  background: var(--color-accent);
}

/* ── Layout: wider sidebar, fluid content ───────────────────
   Furo fixes the sidebar at 15em and the content at 46em, leaving wide
   screens mostly empty. The content grows up to --fk-content-max and the
   left drawer takes the rest, so sidebar + content + TOC stay centred.
   These rules load after furo.css, so they also override its media queries. */
html:root body {
  --fk-sidebar-width: 18rem;
  --fk-content-max: 68rem;
}
.sidebar-container { width: var(--fk-sidebar-width); }
.main { min-width: 0; }
.content {
  box-sizing: border-box;
  width: auto;
  flex: 1 1 auto;
  min-width: 0;
  max-width: var(--fk-content-max);
}
/* 32.5rem = (content + TOC - sidebar) / 2 centres all three; below 82em
   the TOC is an overlay and min-width wins. */
.sidebar-drawer { min-width: var(--fk-sidebar-width); width: calc(50% - 32.5rem); }
@media (max-width: 63em) {
  .sidebar-drawer { width: var(--fk-sidebar-width); left: calc(-1 * var(--fk-sidebar-width)); }
}

/* ── Right TOC ───────────────────────────────────────────── */
.toc-title {
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}
.toc-tree li.scroll-current > .reference { font-weight: var(--fw-bold); }

/* ── Mobile header: nothing centred ──────────────────────── */
.mobile-header .header-center { flex: 1; justify-content: flex-start; }
.mobile-header .header-center a { text-align: left; }
.mobile-header .brand { font-weight: var(--fw-bold); font-size: 0.9375rem; color: var(--fk-text-strong); }

.theme-toggle, .content-icon-container label, .nav-overlay-icon, .toc-overlay-icon {
  border-radius: var(--radius-sm);
  transition: background-color var(--transition-fast);
}
.theme-toggle:hover { background: var(--fk-surface-hover); }

/* ── Inline code: PT Sans (technical values) ─────────────── */
article[role="main"] :is(code.literal, .sig-inline) {
  font-family: var(--font-device);
  font-size: 0.875em;
  background: var(--color-inline-code-background);
  border: 0;
  border-radius: var(--radius-xs);
  padding: 0.1em 0.3em;
}

/* ── Code blocks: dark surface, PT Mono, monochrome ─────── */
article[role="main"] div[class*="highlight"] .highlight,
article[role="main"] pre.literal-block {
  background: var(--color-code-background);
  border: 0;
  border-radius: var(--radius-sm);
}
article[role="main"] .highlight pre,
article[role="main"] pre.literal-block {
  font-family: var(--font-stack--monospace);
  font-size: var(--text-sm);
  line-height: 1.43;
  color: var(--color-code-foreground);
  padding: var(--space-4);
}
/* One accent colour (§1): drop Pygments hues. LaTeX keeps pygments_style. */
article[role="main"] .highlight span:not(.linenos) { color: inherit; background: none; }
article[role="main"] .highlight :is(.c, .c1, .ch, .cm, .cp, .cpf, .cs) { color: var(--grey-500); font-style: normal; }
article[role="main"] .highlight :is(.k, .kc, .kd, .kn, .kp, .kr, .kt, .nt, .gp) { font-weight: var(--fw-bold); }

button.copybtn {
  color: var(--grey-300);
  background: var(--grey-900);
  border: 1px solid var(--grey-700);
  border-radius: var(--radius-sm);
  transition: background-color var(--transition-fast), opacity var(--transition-fast);
}
button.copybtn:hover { background: var(--grey-800); }

/* ── Tables (web-app.md §3 Table) ─────────────────────────── */
article[role="main"] table.docutils {
  border: 0;
  border-radius: 0;
  box-shadow: none;
  border-collapse: collapse;
  font-family: var(--font-device);
  font-size: var(--text-sm);
}
article[role="main"] table.docutils :is(th, td) {
  border: 0;
  border-bottom: 1px solid var(--fk-border-subtle);
  padding: var(--space-3) var(--space-4) var(--space-3) 0;
  text-align: left;
  vertical-align: top;
}
article[role="main"] table.docutils th {
  background: transparent;
  color: var(--fk-text-strong);
  font-size: var(--text-xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.03em;
  border-bottom: 2px solid var(--color-accent);
}
article[role="main"] table.docutils :is(td, th) p { margin: 0; }

/* ── Admonitions → Alert (feedback/Alert.jsx) ───────────── */
article[role="main"] .admonition,
article[role="main"] .topic {
  --fk-tone: var(--color-info);
  background: var(--fk-alert-bg);
  border: 1px solid var(--fk-border-subtle);
  border-left: var(--stripe-thickness) solid var(--fk-tone);
  border-radius: var(--radius-sm);
  box-shadow: none;
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-sm);
}
article[role="main"] .admonition:is(.hint, .tip) { --fk-tone: var(--color-success); }
article[role="main"] .admonition:is(.warning, .attention) { --fk-tone: var(--color-warning); }
article[role="main"] .admonition:is(.danger, .error, .important, .caution) { --fk-tone: var(--color-danger); }
article[role="main"] .admonition > .admonition-title,
article[role="main"] p.topic-title {
  margin: 0 0 var(--space-1);
  padding: 0;
  background: transparent;
  color: var(--fk-text-strong);
  font-size: var(--text-sm);
  font-weight: var(--fw-bold);
  text-transform: none;
}
article[role="main"] .admonition > .admonition-title::before,
article[role="main"] p.topic-title::before { content: none; display: none; }
article[role="main"] .admonition > :last-child { margin-bottom: 0; }

/* ── sphinx-design: flat cards, small radii ──────────────── */
.sd-card { border: 1px solid var(--fk-border-subtle); border-radius: var(--radius-sm); background: var(--fk-surface-page); }
:is(.sd-shadow-sm, .sd-shadow-md, .sd-shadow-lg) { box-shadow: none !important; } /* sphinx-design sets !important */
.sd-badge { border-radius: var(--radius-xs); font-family: var(--font-brand); font-weight: var(--fw-bold); }

/* ── Footer ──────────────────────────────────────────────── */
.bottom-of-page { font-size: var(--text-xs); color: var(--fk-text-muted); }

/* ── Furo chrome: radius ≤ 6 px, no decorative shadow, nothing moves ── */
article[role="main"] :is(h1, h2, h3, h4, h5, h6) { border-radius: var(--radius-xs); }
.mobile-header.scrolled { box-shadow: none; border-bottom: 1px solid var(--fk-border-subtle); }
.back-to-top {
  border: 1px solid var(--fk-border-default);
  border-radius: var(--radius-sm);
  box-shadow: none;
  color: var(--fk-text-body);
}
.back-to-top:hover { background: var(--fk-surface-hover); }
.skip-to-content { border-radius: var(--radius-sm); transition: none; }
kbd:not(.compound) { border-radius: var(--radius-xs); box-shadow: none; }
.guilabel { border-radius: var(--radius-xs); }
blockquote:is(.epigraph, .pull-quote) { border-radius: 0; }

/* ── Command headings (.. rst-class:: cli-command): device strings in PT Sans (§3) ── */
article[role="main"] section.cli-command > :is(h2, h3, h4, h5, h6) {
  font-family: var(--font-device);
  letter-spacing: 0;
}

/* #62: which Fakel release the page describes */
article[role="main"] .docs-product {
  margin: 0 0 0.5rem;
  font-size: 0.8125rem;
  color: var(--color-foreground-secondary);
}