@import url("https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600&display=swap");

/* Takshak design system, matching takshak.io: warm paper, ink text, hairline
   rules, and viridian as the only accent. Colour is reserved for links and
   interaction. The header is paper-coloured, so "primary" here means paper,
   as with Material's own white palette. Warning and danger callouts keep
   their standard colours because those colours carry meaning. */

:root,
[data-md-color-scheme="default"] {
  --takshak-accent:             #0e5a47;
  --takshak-accent-deep:        #0a4436;
  --takshak-rule:               rgba(21, 24, 22, 0.16);
  --takshak-rule-soft:          rgba(21, 24, 22, 0.09);
  --takshak-button-bg:          #151816;
  --takshak-button-fg:          #faf7f2;

  --md-default-bg-color:        #faf7f2;
  --md-default-fg-color:        #151816;
  --md-default-fg-color--light: #646c66;
  --md-default-fg-color--lighter: rgba(21, 24, 22, 0.32);
  --md-default-fg-color--lightest: rgba(21, 24, 22, 0.09);
  --md-typeset-color:           #3e4540;

  --md-primary-fg-color:        #faf7f2;
  --md-primary-fg-color--light: #f1ebe0;
  --md-primary-fg-color--dark:  #f1ebe0;
  --md-primary-bg-color:        #151816;
  --md-primary-bg-color--light: #646c66;

  --md-accent-fg-color:         #0e5a47;
  --md-accent-fg-color--transparent: #0e5a471a;
  --md-accent-bg-color:         #faf7f2;
  --md-accent-bg-color--light:  #faf7f2b3;

  --md-typeset-a-color:         #0e5a47;
  --md-code-bg-color:           #f1ebe0;
  --md-code-fg-color:           #262b28;

  --md-footer-bg-color:         #151816;
  --md-footer-bg-color--dark:   #151816;
  --md-footer-fg-color:         #faf7f2;
}

[data-md-color-scheme="slate"] {
  --takshak-accent:             #6fc4ab;
  --takshak-accent-deep:        #8fd4c0;
  --takshak-rule:               rgba(250, 247, 242, 0.18);
  --takshak-rule-soft:          rgba(250, 247, 242, 0.1);
  --takshak-button-bg:          #faf7f2;
  --takshak-button-fg:          #151816;

  --md-default-bg-color:        #151816;
  --md-default-fg-color:        #faf7f2;
  --md-default-fg-color--light: rgba(250, 247, 242, 0.6);
  --md-default-fg-color--lighter: rgba(250, 247, 242, 0.32);
  --md-default-fg-color--lightest: rgba(250, 247, 242, 0.1);
  --md-typeset-color:           rgba(250, 247, 242, 0.84);

  --md-primary-fg-color:        #151816;
  --md-primary-fg-color--light: #262b28;
  --md-primary-fg-color--dark:  #262b28;
  --md-primary-bg-color:        #faf7f2;
  --md-primary-bg-color--light: rgba(250, 247, 242, 0.6);

  --md-accent-fg-color:         #6fc4ab;
  --md-accent-fg-color--transparent: #6fc4ab1a;
  --md-accent-bg-color:         #151816;

  --md-typeset-a-color:         #6fc4ab;
  --md-code-bg-color:           #262b28;
  --md-code-fg-color:           #faf7f2;

  --md-footer-bg-color:         #0f1110;
  --md-footer-bg-color--dark:   #0f1110;
}

::selection {
  background: var(--takshak-accent);
  color: var(--md-accent-bg-color);
}

/* ---- typography ---- */

.md-typeset h1,
.md-typeset h2,
.md-typeset h3 {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 500;
  color: var(--md-default-fg-color);
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.md-typeset h1 { font-size: 2.3em; margin-bottom: 0.8em; }
.md-typeset h2 {
  font-size: 1.55em;
  margin-top: 2em;
  padding-bottom: 0.4em;
  border-bottom: 1px solid var(--takshak-rule);
}
.md-typeset h3 { font-size: 1.2em; }
.md-typeset h4 { font-weight: 600; color: var(--md-default-fg-color); }
.md-typeset a { text-underline-offset: 0.15em; }

/* ---- header and tabs: paper, hairline rules, no shadow ---- */

.md-header,
.md-header--shadow {
  box-shadow: none;
  border-bottom: 1px solid var(--takshak-rule-soft);
}
.md-header__button.md-logo { display: none; }
.md-header__title {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 500;
  letter-spacing: -0.01em;
}
.md-tabs { border-bottom: 1px solid var(--takshak-rule); }
.md-tabs__link {
  font-weight: 500;
  opacity: 0.72;
}
.md-tabs__item--active .md-tabs__link,
.md-tabs__link:hover {
  color: var(--takshak-accent);
  opacity: 1;
}

@media screen and (min-width: 60em) {
  .md-search__input,
  .md-search__input:hover {
    background-color: var(--takshak-rule-soft);
  }
  .md-search__input::placeholder,
  .md-search__icon[for="__search"] {
    color: var(--md-default-fg-color--light);
  }
}

/* ---- tables and callouts: hairlines, not boxes ---- */

.md-typeset table:not([class]) {
  border: 1px solid var(--takshak-rule);
  border-radius: 0;
}
.md-typeset table:not([class]) th {
  background: var(--md-code-bg-color);
  color: var(--md-default-fg-color);
  font-weight: 600;
}
.md-typeset .admonition,
.md-typeset details {
  border-radius: 0;
  box-shadow: none;
}
.md-typeset .admonition.note,
.md-typeset details.note,
.md-typeset .admonition.info,
.md-typeset details.info,
.md-typeset .admonition.tip,
.md-typeset details.tip {
  border-color: var(--takshak-accent);
}
.md-typeset .note > .admonition-title,
.md-typeset .note > summary,
.md-typeset .info > .admonition-title,
.md-typeset .info > summary,
.md-typeset .tip > .admonition-title,
.md-typeset .tip > summary {
  background-color: var(--md-accent-fg-color--transparent);
}
.md-typeset .note > .admonition-title::before,
.md-typeset .note > summary::before,
.md-typeset .info > .admonition-title::before,
.md-typeset .info > summary::before,
.md-typeset .tip > .admonition-title::before,
.md-typeset .tip > summary::before {
  background-color: var(--takshak-accent);
}

/* ---- password form on protected pages ---- */

#mkdocs-encrypted-content input[type="password"],
#mkdocs-content-password {
  padding: 0.5em 0.7em;
  border: 1px solid var(--takshak-rule);
  background: transparent;
  color: var(--md-default-fg-color);
  font: inherit;
}
#mkdocs-decrypt-button {
  margin-left: 0.4em;
  padding: 0.5em 1.1em;
  border: 1px solid var(--takshak-button-bg);
  background: var(--takshak-button-bg);
  color: var(--takshak-button-fg);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
#mkdocs-decrypt-button:hover {
  background: var(--takshak-accent);
  border-color: var(--takshak-accent);
  color: var(--md-accent-bg-color);
}

/* ------------------------------------------------------------------
 * Layout: give the main content area more room.
 *
 * Material's default grid caps at 61rem total, which on wide screens
 * means the article occupies barely 40% of the viewport while the
 * sidebars sit in oceans of whitespace. Widen the grid, narrow both
 * sidebars, and shrink their typography a touch so the centre column
 * gets the lion's share of the screen.
 * ------------------------------------------------------------------ */

.md-grid {
  max-width: 95rem;
}

@media screen and (min-width: 76.25em) {
  /* Primary (left) nav: tighter, pushed to the edge */
  .md-sidebar--primary {
    width: 11rem;
  }
  /* Secondary (right) TOC: tighter, pushed to the edge */
  .md-sidebar--secondary {
    width: 10rem;
  }
  /* Content claims everything the sidebars don't */
  .md-content {
    max-width: none;
  }
}

/* Slightly smaller sidebar text so narrower columns don't wrap awkwardly */
.md-nav {
  font-size: 0.68rem;
}
.md-nav__title {
  font-size: 0.7rem;
}

/* ------------------------------------------------------------------
 * PDF download button
 * Injected at the top of every article by pdf-download.js.
 * ------------------------------------------------------------------ */

.pdf-download-bar {
  display: flex;
  justify-content: flex-end;
  gap: 0.5em;
  margin-bottom: 1.25em;
}

.pdf-download-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.35em 0.9em;
  border: 1px solid var(--md-default-fg-color);
  border-radius: 0;
  background: transparent;
  color: var(--md-default-fg-color);
  font-family: var(--md-text-font-family, inherit);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease;
}

.pdf-download-btn:hover {
  background: var(--md-default-fg-color);
  color: var(--md-default-bg-color);
}

.pdf-download-btn svg {
  flex-shrink: 0;
}

/* ------------------------------------------------------------------
 * Print / PDF styles
 * Triggered by window.print() from the download button above.
 * Goal: clean, full-width article that looks like the on-screen page.
 * ------------------------------------------------------------------ */

@media print {
  /* ---- hide all chrome ---- */
  .md-header,
  .md-tabs,
  .md-sidebar,
  .md-footer,
  .md-announce,
  .md-content__button,
  .pdf-download-bar,
  [data-md-component="skip"],
  [data-md-component="announce"],
  .md-search,
  .headerlink {
    display: none !important;
  }

  /* ---- force the LIGHT theme for print ----
   * The slate (dark) palette auto-activates when the OS/browser is in dark
   * mode. Combined with `print-color-adjust: exact` below, that dragged the
   * dark page background and dark borders into the PDF (the "black border").
   * Pin the page to dark text on white regardless of the active scheme. */
  /* color-scheme:dark (set by slate) makes the browser paint the whole
   * page canvas — including the @page margin frame — dark, regardless of
   * background-color. Forcing it to light is what removes the black border. */
  :root,
  html,
  [data-md-color-scheme="slate"] {
    color-scheme: light !important;
  }

  [data-md-color-scheme="slate"],
  html,
  body,
  .md-main,
  .md-content,
  .md-content__inner {
    background-color: #fff !important;
    color: #1a1a1a !important;
  }

  .md-typeset {
    color: #1a1a1a !important;
  }

  /* ---- full-width layout ---- */
  .md-main,
  .md-main__inner,
  .md-content {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .md-content__inner {
    margin: 0 !important;
    padding: 1cm 0 !important;
    max-width: 100% !important;
  }

  /* ---- preserve all colours (code, admonitions, status pills, etc.) ---- */
  * {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  /* ---- typography ---- */
  body {
    font-size: 11pt;
  }

  .md-typeset {
    font-size: 0.75rem;
  }

  /* ---- links: show URL after link text ---- */
  .md-typeset a[href]::after {
    content: none; /* keep it clean for internal docs */
  }

  /* ---- code blocks: light background + subtle border for print ---- */
  .md-typeset pre,
  .md-typeset code,
  .md-typeset pre > code,
  .md-typeset .highlight {
    white-space: pre-wrap !important;
    word-break: break-all;
    background-color: #f5f5f5 !important;
    color: #1a1a1a !important;
    border: 1px solid #e0e0e0 !important;
  }

  /* ---- mermaid / SVG diagrams: scale to page width ---- */
  .md-typeset .mermaid,
  .md-typeset svg {
    max-width: 100% !important;
    height: auto !important;
  }

  /* ---- tables: keep borders visible ---- */
  .md-typeset table:not([class]) {
    border-collapse: collapse !important;
  }

  .md-typeset table:not([class]) th,
  .md-typeset table:not([class]) td {
    border: 1px solid #ccc !important;
    color: #1a1a1a !important;
  }

  .md-typeset table:not([class]) th {
    background-color: #f0f0f0 !important;
  }

  /* ---- admonitions: keep the coloured left border ---- */
  .md-typeset .admonition {
    border-left-width: 4px !important;
    page-break-inside: avoid;
  }

  /* ---- sensible page breaks ---- */
  h1, h2, h3, h4 {
    page-break-after: avoid;
  }

  pre, blockquote, table, figure, .admonition {
    page-break-inside: avoid;
  }

  /* Manual page break: put
     <div class="page-break"></div> in the Markdown (md_in_html is on).    */
  .page-break {
    page-break-before: always;
    break-before: page;
  }

  /* ---- page margins ---- */
  @page {
    size: A4;
    margin: 1.8cm 1.5cm;
  }

  /* ---- first page: site name + page title as a simple header ---- */
  @page :first {
    margin-top: 2cm;
  }
}

/* ---------------------------------------------------------------------------
   Print / PDF: start each top-level section on a new page.

   Long reference documents are read on
   screen as a single page but are often printed or exported to PDF a section
   at a time. Breaking before every `##` heading means each numbered section
   starts on a fresh sheet, so a single section can be printed or shared
   without carrying the rest of the document.

   `break-before` is the modern property; `page-break-before` is kept for
   older print engines (including some browsers' PDF export paths).
   --------------------------------------------------------------------------- */
@media print {
  .md-typeset h2 {
    page-break-before: always;
    break-before: page;
  }

  /* ...but never a leading blank page before the first section. */
  .md-typeset h2:first-of-type {
    page-break-before: avoid;
    break-before: avoid;
  }

  /* Keep a heading with the content that follows it, and avoid orphaning
     table rows or code blocks across a page boundary. */
  .md-typeset h2,
  .md-typeset h3,
  .md-typeset h4 {
    break-after: avoid-page;
    page-break-after: avoid;
  }

  .md-typeset table,
  .md-typeset pre,
  .md-typeset .admonition {
    break-inside: avoid;
    page-break-inside: avoid;
  }
}

/* ---- mermaid diagrams: one light, print-like palette in both colour schemes --------
   Node fills are set per diagram with classDef (light fill, dark stroke, dark text).
   Material's dark scheme would otherwise swap label text to white and cluster
   backgrounds to near-black, which made styled nodes unreadable. Pin the mermaid
   theme variables to the light values so every diagram renders the same way. */
[data-md-color-scheme="slate"] {
  --md-mermaid-font-family: var(--md-text-font-family), sans-serif;
  --md-mermaid-edge-color: #4a4a4a;
  --md-mermaid-node-bg-color: #f4f6f9;
  --md-mermaid-node-fg-color: #4a5568;
  --md-mermaid-label-bg-color: #ffffff;
  --md-mermaid-label-fg-color: #1a1a1a;
  --md-mermaid-sequence-actor-bg-color: #f4f6f9;
  --md-mermaid-sequence-actor-fg-color: #1a1a1a;
  --md-mermaid-sequence-actor-line-color: #4a4a4a;
  --md-mermaid-sequence-label-bg-color: #ffffff;
  --md-mermaid-sequence-label-fg-color: #1a1a1a;
  --md-mermaid-sequence-message-fg-color: #1a1a1a;
  --md-mermaid-sequence-message-line-color: #4a4a4a;
  --md-mermaid-sequence-note-bg-color: #fbf3d5;
  --md-mermaid-sequence-note-fg-color: #1a1a1a;
}
/* Material renders diagrams inside a closed shadow DOM, so page CSS cannot style
   anything inside them; only the --md-mermaid-* variables above pass through.
   The white card therefore goes on the host element. */
.md-typeset .mermaid {
  background: #ffffff;
  border-radius: 0;
  padding: 0.6rem;
}