/* =====================================================================
   Open Culture brand palette — minimal Material customization.

   Source of truth: "Simple Light" theme from Open Culture Template Deck
   (theme1.xml) — extracted programmatically.

   Approach: keep Material's stock visual treatment (admonitions, code
   blocks, tables, headings, collapsibles all as Material designed
   them). Only swap the color variables Material reads, plus a small
   admonition palette swap.
   ===================================================================== */

:root {
  /* ---------------------------------------------------------------------
     Official Open Culture brand tokens (source of truth: brand/brand.md §4,
     brand/tokens/colors.css). The --oc-* names are kept so the rest of this
     stylesheet is unchanged; only the values are aligned to the brand.
     --------------------------------------------------------------------- */

  /* Primary — the green life-spectrum */
  --oc-forest:         #4B6733;   /* Forest — the one structural accent */
  --oc-forest-dark:    #3a4f28;   /* darker Forest for code/text on light */
  --oc-pine:           #2F3E28;   /* Pine — deep immersive green ground */
  --oc-forest-light:   #6f8f4e;   /* Forest→Willow bridge */
  --oc-sage:           #8DA766;   /* Willow — fresh mid-green */
  --oc-pale-sage:      #C4CBB1;   /* Dusty Sage — tint / quiet-panel green */
  --oc-very-pale-sage: #e6e9dc;   /* palest sage tint (fills only) */

  /* Neutrals — luxe naturals */
  --oc-calacatta:      #FBF8F1;   /* brightest warm white (hero surfaces) */
  --oc-cream:          #F4EFE3;   /* Alabaster — DEFAULT page surface */
  --oc-warm-black:     #26251E;   /* Onyx — body text + immersive dark */
  --oc-warm-grey:      #DBD1BD;   /* French Limestone — panels, dividers */
  --oc-weathered-oak:  #A2937A;
  --oc-onyx-900:       #17160F;   /* deepest layered dark surface */
  --oc-onyx-800:       #201F18;   /* layered dark panel */
  --oc-alabaster-200:  #EEE8DA;   /* palest panel tint */

  /* Secondary — data / energy accents (reserve for data viz + states) */
  --oc-purple:         #9B60BC;   /* Orchid */
  --oc-blue:           #3381D5;   /* Azure — focus ring + data, NOT links */
  --oc-orange:         #E28E5B;   /* Clay — a single warm spark */
  --oc-pale-lilac:     #EAC5FF;   /* Lavender — selection + accent */

  /* Accent — muted gold / LED (rare, deliberate; never structure/text) */
  --oc-champagne:      #CBB185;
  --oc-champagne-deep: #7E6234;   /* gold that must read as text/icon on light */

  --oc-danger:         #A23C14;

  /* Type — brand faces first, sanctioned fallbacks after */
  --oc-font:        "Suisse Intl", "Inter", system-ui, -apple-system, sans-serif;
  --oc-font-serif:  "Suisse Works", "Source Serif 4", Georgia, serif;
  --oc-font-script: "OC Script", "Shadows Into Light", cursive;

  /* Motion — slow, weighty, eased (brand §8) */
  --oc-ease-out-soft:  cubic-bezier(0.22, 1, 0.36, 1);
  --oc-ease-cinematic: cubic-bezier(0.16, 1, 0.3, 1);
}

/* Self-hosted OC Script — the genuine hand face. Used ONLY for a deliberate
   brand moment (one accent word in the home hero); never in UI/body/nav. */
@font-face {
  font-family: "OC Script";
  src: url("../assets/fonts/oc-script/oc-script-v03-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* The signature accent word — a single OC Script word on a serif heading. */
.oc-accent {
  font-family: var(--oc-font-script);
  font-weight: 400;
  color: var(--oc-forest);
  display: inline-block;
  transform: translateY(0.04em) rotate(-1.5deg);
}
[data-md-color-scheme="slate"] .oc-accent {
  color: var(--oc-sage);
}

body,
.md-typeset {
  font-family: var(--oc-font);
}

/* Material doesn't paint the body background — it defaults to browser white.
   Explicitly set it so the page background behind the card matches the
   header and footer exactly. */
body {
  background-color: var(--md-default-bg-color);
}

/* =====================================================================
   Theme-aware logo swap.
   The CSS `content` property replaces the <img> src without touching HTML.
   Paths are relative to the built stylesheet (stylesheets/extra.css),
   so assets are one level up at ../assets/.
   Applied to both the header logo and the drawer logo.
   ===================================================================== */

[data-md-color-scheme="default"] .md-header__button.md-logo img,
[data-md-color-scheme="default"] .md-nav__title .md-logo img {
  content: url('../assets/images/full_logo_black.svg');
}
[data-md-color-scheme="slate"] .md-header__button.md-logo img,
[data-md-color-scheme="slate"] .md-nav__title .md-logo img {
  content: url('../assets/images/full_logo_white.svg');
}

/* =====================================================================
   Header + tabs span the full page width, not just the centered
   content column. Body and content stay centered as before.
   ===================================================================== */

.md-header__inner.md-grid,
.md-tabs__inner.md-grid {
  max-width: none;
  padding-left: 1rem;
  padding-right: 1rem;
}

/* =====================================================================
   Header layout — logo flush left, all action icons on the right.
   Without the title's flex:1 spacer, the logo carries the auto margin.
   ===================================================================== */

.md-header__button.md-logo {
  /* Logo stays flush left; auto-margin is on the icon group instead. */
}

/* Source (GitHub) link — icon only, no repo name text.
   Strip the container width and SVG margin that were designed to sit
   beside the repo label; match the same padding as .md-header__button. */
.md-source__repository {
  display: none;
}
.md-source {
  padding: 0.4rem;
}
.md-source__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: auto;
  height: auto;
}
[dir=ltr] .md-source__icon svg,
[dir=rtl] .md-source__icon svg,
           .md-source__icon svg {
  margin: 0;
  width:  1.2rem;
  height: 1.2rem;
}

/* Header icon order: light/dark (1) → GitHub (2) → search (3/4)
   DOM contains two search elements:
     • <label for="__search">  visible at <60em (mobile overlay trigger), order 3
     • <div class="md-search"> inline form at ≥60em / overlay shell at <60em, order 4
   Material hides the label at ≥60em and hides .md-header__source below 60em.

   margin-left:auto on palette pushes the whole right group to the far edge while
   keeping logo + hamburger flush left at ALL viewport widths. */
.md-header__inner > .md-header__option {
  order: 1;
  margin-left: auto;          /* spacer: everything right of here goes to far right */
}
.md-header__inner > .md-header__source {
  order: 2;
  display: block;             /* override Material's display:none on mobile */
  margin-left: 0;             /* override Material's 1rem / 1.4rem gap */
  width: auto;                /* override Material's 11.7rem fixed width */
  max-width: none;
}
.md-header__inner > .md-header__button[for="__search"] {
  order: 3;                   /* mobile search trigger → right group */
  margin: 0;                  /* flush against adjacent icons */
}
.md-header__inner > .md-search {
  order: 4;
  margin-left: 0;
}

/* Search shape — form pill sits on top, dropdown hangs below.
   Form: top corners rounded, bottom corners square (joins the dropdown).
   Output: top corners square (joins the form), bottom corners rounded.
   The collapsed form is transparent so its radius is invisible anyway. */
.md-search__form,
.md-search__input {
  border-radius: 10px 10px 0 0;
}
/* Match Material's [dir=ltr/rtl] specificity (0,2,0) so we beat its .1rem defaults. */
[dir=ltr] .md-search__output,
[dir=rtl] .md-search__output,
           .md-search__output {
  border-radius: 0 0 10px 10px;
}

/* =====================================================================
   Search — icon only at desktop.
   On desktop (≥60em) Material hides the outer search button and shows
   the form inline via .md-search__inner (width:11.7rem by default).
   We collapse .md-search__inner to icon width and expand it on focus.
   Collapsing the inner is enough — the form and input fill the parent,
   so no overflow:hidden needed on the parent (that would clip the
   results dropdown, which is position:absolute inside the inner).
   ===================================================================== */

/* Transparent form background when collapsed (no pill visible). */
.md-search__form {
  background-color: transparent;
}

/* Material's active-state rule has specificity 0,3,0 and resets the form
   to border-radius:.1rem .1rem 0 0 — override it with equal specificity
   so our 10px matches the dropdown's bottom corners. */
[data-md-toggle="search"]:checked ~ .md-header .md-search__form {
  border-radius: 10px 10px 0 0;
}

/* Desktop: collapse inner to icon width. */
@media screen and (min-width: 60em) {
  .md-search__inner {
    width: 2.4rem;
    transition: width 0.35s var(--oc-ease-out-soft) !important;
  }

  /* Expand when the user clicks (focuses) the search input. */
  .md-search__inner:focus-within {
    width: 23.4rem;
  }
}

/* Wider breakpoint — match Material's 34.4rem expansion. */
@media screen and (min-width: 76.25em) {
  .md-search__inner:focus-within {
    width: 34.4rem;
  }
}

/* Remove header shadow — both the base (invisible) shadow and the
   .md-header--shadow class Material adds on scroll. */
.md-header,
.md-header--shadow {
  box-shadow: none !important;
}

/* Header and footer use the exact same variable as the page background
   so they are guaranteed to be identical colours. */
.md-header {
  background-color: var(--md-default-bg-color);
  color: var(--md-default-fg-color);
}
.md-footer {
  background-color: var(--md-default-bg-color);
}

/* Hide site-name text — the SVG wordmark already carries the name. */
.md-header__title {
  display: none;
}

/* Hide "Open Culture Science" text in the drawer title.
   The logo is position:absolute inside the label so font-size:0 collapses
   the bare text node without touching the logo image.
   Trim the height from Material's 5.6rem (sized to fit logo + site-name text)
   down to just clear the logo (~3.8rem). */
.md-nav--primary .md-nav__title[for="__drawer"] {
  font-size: 0;
  height: 4rem;
}

/* At wide widths (≥76.25em) the drawer is gone and Material re-uses the
   drawer title as a sticky logo header inside the left sidebar.  Hide it
   there — the logo is already in the main header — so nav items start at
   the very top of the sidebar, matching the right TOC sidebar. */
@media screen and (min-width: 76.25em) {
  .md-nav--primary .md-nav__title[for="__drawer"] {
    display: none;
  }
}

/* Hide the GitHub source block that appears below the logo in the drawer.
   Material shows it at <60em via .md-nav__source { display:block };
   the parent-scoped selector (0,2,0) beats that (0,1,0). */
.md-nav--primary .md-nav__source {
  display: none;
}

/* =====================================================================
   Sidebar / content vertical alignment — flush with the header.

   Material's .md-main__inner has margin-top:1.5rem which creates a gap
   below the header before the sidebar flex-row starts.  With position:sticky
   the sidebars only snap to top:2.4rem (the header bottom) once you scroll
   past that 1.5rem gap — so on a freshly loaded page both sidebars sag below
   the header.  Zeroing the margin fixes the initial-load position.

   Both sidebars also inherit padding:1.2rem 0 from .md-sidebar; we replace
   that with a smaller 0.8rem top pad to give gentle breathing room from the
   header while keeping the sidebars visually aligned with the content area.
   ===================================================================== */
/* Full-width card spanning all three columns (left nav + content + right TOC).
   Small margin on sides/bottom keeps a sliver of page background visible
   around the card.  margin-top:0.4rem gives a subtle gap from the header
   so the rounded top corners are visible; the sidebars are position:sticky
   so they naturally sit inside the card and scroll-lock correctly. */
.md-main__inner {
  max-width: none;
  margin: 0.4rem 0.5rem 0.5rem;
  padding-bottom: 1rem;
  background: var(--oc-calacatta);   /* brand warm white — the hero surface */
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(38, 37, 30, 0.06);
}
[data-md-color-scheme="slate"] .md-main__inner {
  background: var(--oc-warm-black);  /* Onyx card on the Onyx-900 page */
  box-shadow: 0 0 0 1px rgba(244, 239, 227, 0.07);  /* rim instead of drop shadow */
}
.md-sidebar--primary,
.md-sidebar--secondary {
  padding-top: 2.4rem;
}

/* Content area — padding only; the card background comes from .md-main__inner.
   max-width keeps prose line lengths comfortable on very wide screens. */
.md-content__inner {
  padding: 2.4rem 2rem 2.4rem;
  max-width: 52rem;
}

/* Hide the "Table of contents" heading in the right sidebar — it adds
   ~1.2rem of height before the first TOC link at wide widths. */
.md-nav--secondary .md-nav__title {
  display: none;
}

/* Truncate long TOC entries (e.g. API endpoint paths) with an ellipsis
   so they never wrap onto a second line. */
.md-nav--secondary .md-nav__link {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Left-align footer copyright text and match its left edge to the card.
   The .md-grid class on .md-footer-meta__inner adds a max-width and
   justify-content:space-between; override both so the text sits flush
   left at the same 0.5rem offset as the card's margin. */
.md-footer-meta__inner {
  max-width: none;
  justify-content: flex-start;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

/* Inline the copyright block so it sits on the same line as
   "Made with Material for MkDocs", with a centred dot separator. */
.md-copyright__highlight {
  display: inline;
}
.md-copyright__highlight::after {
  content: "\00a0\00a0\00a0\00a0\00a0";
}

/* =====================================================================
   Light mode — cream bg, warm-black text, forest primary, blue links
   ===================================================================== */

[data-md-color-scheme="default"] {
  /* Header + footer = same cream as the page background so they
     blend seamlessly with the area behind the card. */
  --md-primary-fg-color:        var(--oc-cream);
  --md-primary-fg-color--light: #fdfaf3;
  --md-primary-fg-color--dark:  #ede9df;
  --md-primary-bg-color:        var(--oc-warm-black);

  /* Forest is the single structural accent — links, active nav, hovers. */
  --md-accent-fg-color:              var(--oc-forest);
  --md-accent-fg-color--transparent: rgba(75, 103, 51, 0.1);

  --md-default-bg-color: var(--oc-cream);
  --md-default-fg-color: var(--oc-warm-black);

  /* Code: same Alabaster as the page; rely on monospace + color for
     differentiation. Code blocks get a subtle dusty-sage border below. */
  --md-code-bg-color: var(--oc-cream);
  --md-code-fg-color: var(--oc-forest-dark);

  --md-typeset-a-color: var(--oc-forest);

  /* Footer = same cream as the page background. */
  --md-footer-bg-color:       var(--oc-cream);
  --md-footer-bg-color--dark: var(--oc-cream);
  --md-footer-fg-color:               var(--oc-warm-black);
  --md-footer-fg-color--light:        rgba(46, 46, 37, 0.7);
  --md-footer-fg-color--lighter:      rgba(46, 46, 37, 0.45);
}

/* =====================================================================
   Dark mode — warm near-black bg, cream text, forest primary
   ===================================================================== */

[data-md-color-scheme="slate"] {
  /* Header + footer = same warm-black as the page background so they
     blend seamlessly with the area behind the card. */
  --md-primary-fg-color:        var(--oc-warm-black);
  --md-primary-fg-color--light: #3e3e34;
  --md-primary-fg-color--dark:  #1e1e18;
  --md-primary-bg-color:        var(--oc-cream);

  /* Willow is the structural accent on dark (Forest is too dark on Onyx). */
  --md-accent-fg-color:              var(--oc-sage);
  --md-accent-fg-color--transparent: rgba(141, 167, 102, 0.18);

  /* Onyx immersive dark — Onyx-900 page ground, warm not pure black. */
  --md-default-bg-color: var(--oc-onyx-900);
  --md-default-fg-color: var(--oc-cream);

  --md-code-bg-color: var(--oc-onyx-800);
  --md-code-fg-color: var(--oc-pale-sage);

  --md-typeset-a-color: var(--oc-sage);

  /* Footer = same Onyx-900 as the page background. */
  --md-footer-bg-color:       var(--oc-onyx-900);
  --md-footer-bg-color--dark: var(--oc-onyx-900);
  --md-footer-fg-color:               var(--oc-cream);
  --md-footer-fg-color--light:        rgba(248, 245, 236, 0.85);
  --md-footer-fg-color--lighter:      rgba(248, 245, 236, 0.55);
}

/* =====================================================================
   Code blocks — subtle pale-sage frame so multi-line blocks stay
   visually distinct now that the bg matches the page.
   Inline code (single-line in prose) is left without a border.
   ===================================================================== */

.md-typeset pre > code {
  border: 1px solid var(--oc-pale-sage);
}
[data-md-color-scheme="slate"] .md-typeset pre > code {
  border: 1px solid #363630;
}

/* =====================================================================
   Rounded borders — shared 8px language across all boxed elements.
   Matches code blocks (8px), search bar (10px), and page card (12px).
   ===================================================================== */

/* Code blocks */
.md-typeset pre {
  border-radius: 8px;
  overflow: hidden;         /* clip the code element's background to the rounded corners */
}
.md-typeset pre > code {
  border-radius: 8px;       /* rounds the border outline drawn on the code element */
}

/* Tables — Material sets display:inline-block + overflow:auto on the
   table element, so border-radius clips the header corners cleanly. */
.md-typeset table:not([class]) {
  border-radius: 8px;
}

/* Admonitions and collapsible <details> blocks.
   overflow:hidden clips the title band's background to the rounded corners. */
.md-typeset .admonition,
.md-typeset details {
  border-radius: 8px;
  overflow: hidden;
}

/* Grid cards (e.g. index page feature cards) */
.md-typeset .grid.cards > ul > li,
.md-typeset .grid.cards > ol > li,
.md-typeset .grid > .card {
  border-radius: 8px;
}

/* =====================================================================
   Syntax highlighting — override Material's --md-code-hl-* variables
   with the four brand accent colors. (Material hardcodes these vars;
   pygments_style in pymdownx.highlight has no effect.)

     keyword   purple #9b60bc       string   sage   #97b367
     constant  purple #9b60bc       number   orange #e28e5b
     function  blue   #3381d5       special  orange #e28e5b
   Comments stay muted; operators / punctuation default to text color.
   ===================================================================== */

[data-md-color-scheme="default"] {
  --md-code-hl-keyword-color:     var(--oc-purple);
  --md-code-hl-constant-color:    var(--oc-purple);
  --md-code-hl-function-color:    var(--oc-blue);
  --md-code-hl-string-color:      var(--oc-sage);
  --md-code-hl-number-color:      var(--oc-orange);
  --md-code-hl-special-color:     var(--oc-orange);
  --md-code-hl-name-color:        var(--md-code-fg-color);
  --md-code-hl-operator-color:    var(--oc-warm-black);
  --md-code-hl-punctuation-color: var(--oc-warm-black);
  --md-code-hl-comment-color:     #7a7a6e;
  --md-code-hl-variable-color:    var(--oc-warm-black);
  --md-code-hl-generic-color:     var(--oc-warm-black);
}

[data-md-color-scheme="slate"] {
  --md-code-hl-keyword-color:     var(--oc-purple);
  --md-code-hl-constant-color:    var(--oc-purple);
  --md-code-hl-function-color:    var(--oc-blue);
  --md-code-hl-string-color:      var(--oc-pale-sage);
  --md-code-hl-number-color:      var(--oc-orange);
  --md-code-hl-special-color:     var(--oc-orange);
  --md-code-hl-name-color:        var(--md-code-fg-color);
  --md-code-hl-operator-color:    var(--oc-cream);
  --md-code-hl-punctuation-color: var(--oc-cream);
  --md-code-hl-comment-color:     rgba(248, 245, 236, 0.5);
  --md-code-hl-variable-color:    var(--oc-cream);
  --md-code-hl-generic-color:     var(--oc-cream);
}

/* Italic comments (Material doesn't italicize by default). */
.md-typeset .highlight .c,
.md-typeset .highlight .c1,
.md-typeset .highlight .cm,
.md-typeset .highlight .ch,
.md-typeset .highlight .cs,
.md-typeset .highlight .sd {
  font-style: italic;
}

/* =====================================================================
   Admonitions — brand-color swap of stock blue / green / red
   ===================================================================== */

/* Blue family: note, info, abstract, summary, todo */
.md-typeset .admonition.note,
.md-typeset details.note,
.md-typeset .admonition.info,
.md-typeset details.info,
.md-typeset .admonition.abstract,
.md-typeset details.abstract,
.md-typeset .admonition.summary,
.md-typeset details.summary,
.md-typeset .admonition.todo,
.md-typeset details.todo {
  border-color: var(--oc-blue);
}
.md-typeset .note > .admonition-title,
.md-typeset .note > summary,
.md-typeset .info > .admonition-title,
.md-typeset .info > summary,
.md-typeset .abstract > .admonition-title,
.md-typeset .abstract > summary,
.md-typeset .summary > .admonition-title,
.md-typeset .summary > summary,
.md-typeset .todo > .admonition-title,
.md-typeset .todo > summary {
  background-color: rgba(51, 129, 213, 0.1);
}
.md-typeset .note > .admonition-title::before,
.md-typeset .note > summary::before,
.md-typeset .info > .admonition-title::before,
.md-typeset .info > summary::before,
.md-typeset .abstract > .admonition-title::before,
.md-typeset .abstract > summary::before,
.md-typeset .summary > .admonition-title::before,
.md-typeset .summary > summary::before,
.md-typeset .todo > .admonition-title::before,
.md-typeset .todo > summary::before {
  background-color: var(--oc-blue);
}

/* Green family: tip, success, question, hint, check */
.md-typeset .admonition.tip,
.md-typeset details.tip,
.md-typeset .admonition.success,
.md-typeset details.success,
.md-typeset .admonition.question,
.md-typeset details.question,
.md-typeset .admonition.hint,
.md-typeset details.hint,
.md-typeset .admonition.check,
.md-typeset details.check {
  border-color: var(--oc-forest);
}
.md-typeset .tip > .admonition-title,
.md-typeset .tip > summary,
.md-typeset .success > .admonition-title,
.md-typeset .success > summary,
.md-typeset .question > .admonition-title,
.md-typeset .question > summary,
.md-typeset .hint > .admonition-title,
.md-typeset .hint > summary,
.md-typeset .check > .admonition-title,
.md-typeset .check > summary {
  background-color: rgba(83, 110, 60, 0.1);
}
.md-typeset .tip > .admonition-title::before,
.md-typeset .tip > summary::before,
.md-typeset .success > .admonition-title::before,
.md-typeset .success > summary::before,
.md-typeset .question > .admonition-title::before,
.md-typeset .question > summary::before,
.md-typeset .hint > .admonition-title::before,
.md-typeset .hint > summary::before,
.md-typeset .check > .admonition-title::before,
.md-typeset .check > summary::before {
  background-color: var(--oc-forest);
}

/* Red family: failure, danger, bug, error -> brand orange */
.md-typeset .admonition.failure,
.md-typeset details.failure,
.md-typeset .admonition.danger,
.md-typeset details.danger,
.md-typeset .admonition.bug,
.md-typeset details.bug,
.md-typeset .admonition.error,
.md-typeset details.error {
  border-color: var(--oc-orange);
}
.md-typeset .failure > .admonition-title,
.md-typeset .failure > summary,
.md-typeset .danger > .admonition-title,
.md-typeset .danger > summary,
.md-typeset .bug > .admonition-title,
.md-typeset .bug > summary,
.md-typeset .error > .admonition-title,
.md-typeset .error > summary {
  background-color: rgba(226, 142, 91, 0.12);
}
.md-typeset .failure > .admonition-title::before,
.md-typeset .failure > summary::before,
.md-typeset .danger > .admonition-title::before,
.md-typeset .danger > summary::before,
.md-typeset .bug > .admonition-title::before,
.md-typeset .bug > summary::before,
.md-typeset .error > .admonition-title::before,
.md-typeset .error > summary::before {
  background-color: var(--oc-orange);
}

/* =====================================================================
   Typography — Inter font, relaxed line-height, tight heading tracking
   ===================================================================== */

.md-typeset {
  line-height: 1.7;
}

/* The brand signature: serif display headings (Suisse Works → Source Serif 4),
   used at regular weight — hierarchy comes from size + color, not weight. */
.md-typeset h1,
.md-typeset h2,
.md-typeset h3,
.md-typeset h4,
.md-typeset h5,
.md-typeset h6 {
  font-family: var(--oc-font-serif);
  font-weight: 400;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.md-typeset h1 {
  line-height: 1.08;
  font-weight: 500;   /* the one heading that carries a touch more presence */
}
.md-typeset h2,
.md-typeset h3 {
  line-height: 1.15;
}

/* =====================================================================
   Heading colors — forest green for h2/h3 creates clear section breaks.
   Sage is used in dark mode for sufficient contrast on the dark card.
   ===================================================================== */

.md-typeset h2,
.md-typeset h3 {
  color: var(--oc-forest);
}
[data-md-color-scheme="slate"] .md-typeset h2,
[data-md-color-scheme="slate"] .md-typeset h3 {
  color: var(--oc-sage);
}

/* =====================================================================
   Inline code — pale sage tint + pill shape so it reads distinctly
   from the surrounding prose without the harshness of a bright bg.
   Targets only inline code (not code inside <pre> blocks).
   ===================================================================== */

.md-typeset :not(pre) > code {
  background-color: var(--oc-very-pale-sage);
  border-radius: 4px;
  color: var(--oc-forest-dark);
}
[data-md-color-scheme="slate"] .md-typeset :not(pre) > code {
  background-color: rgba(151, 179, 103, 0.13);
  color: var(--oc-pale-sage);
}

/* =====================================================================
   Table headers — pale sage fill ties tables into the brand palette.
   ===================================================================== */

.md-typeset table:not([class]) th {
  background-color: var(--oc-very-pale-sage);
  color: var(--oc-forest-dark);
}
[data-md-color-scheme="slate"] .md-typeset table:not([class]) th {
  background-color: rgba(151, 179, 103, 0.18);
  color: var(--oc-pale-sage);
}

/* =====================================================================
   Tab bar — visible bottom border on the label row; active tab uses
   brand green by scoping --md-accent-fg-color to the tabbed-set div.
   ===================================================================== */

.md-typeset .tabbed-labels {
  border-bottom: 1px solid var(--oc-warm-grey);
}
[data-md-color-scheme="slate"] .md-typeset .tabbed-labels {
  border-bottom: 1px solid rgba(248, 245, 236, 0.12);
}

/* Scope accent to tab sets so active tab indicator uses forest green. */
.md-typeset .tabbed-set {
  --md-accent-fg-color: var(--oc-forest);
  --md-accent-fg-color--transparent: rgba(83, 110, 60, 0.1);
}
[data-md-color-scheme="slate"] .md-typeset .tabbed-set {
  --md-accent-fg-color: var(--oc-sage);
  --md-accent-fg-color--transparent: rgba(151, 179, 103, 0.12);
}

/* =====================================================================
   Navigation active state — forest green color + weight on the
   current page link in the left sidebar.
   ===================================================================== */

.md-nav--primary .md-nav__link--active {
  color: var(--oc-forest);
  font-weight: 600;
}
[data-md-color-scheme="slate"] .md-nav--primary .md-nav__link--active {
  color: var(--oc-sage);
}

/* =====================================================================
   Copy button — brand green on hover instead of the default grey.
   ===================================================================== */

.md-clipboard {
  transition: color 0.2s;
}
.md-clipboard:hover,
.md-clipboard:focus {
  color: var(--oc-forest) !important;
}
[data-md-color-scheme="slate"] .md-clipboard:hover,
[data-md-color-scheme="slate"] .md-clipboard:focus {
  color: var(--oc-sage) !important;
}

/* =====================================================================
   Smooth scroll — anchor jumps (TOC clicks, in-page links) animate
   instead of hard-jumping.
   ===================================================================== */

html {
  scroll-behavior: smooth;
}

/* =====================================================================
   Selection + focus — brand system states: Lavender selection (~70%),
   Azure focus ring (brand.md §4 "System extensions").
   ===================================================================== */
::selection {
  background-color: rgba(234, 197, 255, 0.7);   /* Lavender ~70% */
  color: var(--oc-warm-black);
}
[data-md-color-scheme="slate"] ::selection {
  background-color: rgba(234, 197, 255, 0.35);
  color: var(--oc-cream);
}
.md-content a:focus-visible,
.md-nav__link:focus-visible,
.md-typeset a:focus-visible {
  outline: 2px solid var(--oc-blue);   /* Azure focus ring */
  outline-offset: 2px;
  border-radius: 2px;
}

/* =====================================================================
   Reduced motion — brand.md §8 requires a clean static fallback for
   every motion effect (no scrubbing, no parallax, no smooth-scroll).
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* =====================================================================
   Link hover — subtle underline that appears on hover with a color
   transition, instead of always-on or always-off.
   ===================================================================== */

.md-typeset a {
  text-decoration: none;
  transition: color 0.15s;
}
.md-typeset a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* =====================================================================
   Blockquotes — forest-green left accent bar + pale sage background.
   ===================================================================== */

.md-typeset blockquote {
  border-left: 3px solid var(--oc-forest);
  background-color: var(--oc-very-pale-sage);
  border-radius: 0 8px 8px 0;
  padding: 0.6rem 1rem;
  color: var(--oc-warm-black);
}
[data-md-color-scheme="slate"] .md-typeset blockquote {
  border-left-color: var(--oc-sage);
  background-color: rgba(151, 179, 103, 0.08);
  color: var(--oc-cream);
}

/* =====================================================================
   Code block filename / title bar — pale sage fill so it reads as
   part of the block rather than a floating grey label.
   ===================================================================== */

.md-typeset .highlight .filename {
  background-color: var(--oc-very-pale-sage);
  color: var(--oc-forest-dark);
  border-radius: 8px 8px 0 0;
  border-bottom: 1px solid var(--oc-pale-sage);
}
[data-md-color-scheme="slate"] .md-typeset .highlight .filename {
  background-color: rgba(151, 179, 103, 0.15);
  color: var(--oc-pale-sage);
  border-bottom-color: rgba(151, 179, 103, 0.25);
}
/* Remove the top radius from the code block itself when a filename bar
   sits directly above it, so the two elements join cleanly. */
.md-typeset .highlight:has(.filename) pre {
  border-radius: 0 0 8px 8px;
}

/* =====================================================================
   <kbd> keyboard shortcut styling — subtle pressed-key appearance.
   ===================================================================== */

.md-typeset kbd {
  background-color: var(--oc-very-pale-sage);
  border: 1px solid var(--oc-warm-grey);
  border-bottom: 2px solid var(--oc-warm-grey);
  border-radius: 4px;
  color: var(--oc-forest-dark);
  font-size: 0.75em;
  padding: 0.1em 0.45em;
  font-family: var(--oc-font);
}
[data-md-color-scheme="slate"] .md-typeset kbd {
  background-color: rgba(151, 179, 103, 0.1);
  border-color: rgba(248, 245, 236, 0.2);
  border-bottom-color: rgba(248, 245, 236, 0.35);
  color: var(--oc-pale-sage);
}