/* ===========================================================================
   Scheme-neutral styling shared by both Catppuccin schemes. Loaded via
   `extra_css` in zensical.toml, after the Mocha (slate) and Latte (default)
   variable files. Rules here reference the --ctp-* variables those files
   define, so they automatically adapt to whichever scheme is active.
   =========================================================================== */

/* --- GLightbox -------------------------------------------------------------
   Zensical's bundled lightbox applies no size constraint to images
   (`.gslide-image img` only sets a background), so an image displays at its
   intrinsic size. The zcli terminal screenshots are very wide (and some very
   tall), so clamp them to the viewport and let them scale up to fill it. */
.gslide-image img {
  width: auto;
  height: auto;
  max-width: 92vw;
  max-height: 88vh;
}

/* --- Header & navigation tabs ----------------------------------------------
   Zensical's "modern" header uses a translucent page background rather than
   --md-primary-fg-color, so it must be styled directly. Mantle sits one step
   off the page base, giving the header subtle separation in both schemes. */
.md-header {
  background-color: var(--ctp-mantle);
  color: var(--ctp-text);
}

.md-tabs {
  color: var(--ctp-text);
}

/* Thicker, more obvious underline under the selected top-bar menu item. */
.md-tabs__list .md-tabs__item--active {
  border-bottom: 0.18rem solid var(--ctp-text);
}

/* Remove the "Made with Zensical" meta bar at the very bottom of the footer.
   (The prev/next navigation footer, .md-footer, is a separate element and
   stays.) */
.md-footer-meta {
  display: none;
}

/* --- Text selection (style guide: Overlay 2 @ ~25-30%) --------------------- */
::selection {
  background-color: color-mix(in srgb, var(--ctp-overlay2) 30%, transparent);
}

/* --- Tables: subtle Catppuccin "card" look --------------------------------- */
.md-typeset table:not([class]) {
  border: 0.05rem solid var(--ctp-surface1);
}

.md-typeset table:not([class]) th {
  background-color: var(--ctp-surface0);
}

/* --- Mermaid diagrams ------------------------------------------------------
   Zensical themes mermaid through --md-mermaid-* variables. We set them on the
   scheme element (where --ctp-* are defined) so they resolve to the active
   palette: surface0 nodes with a Lavender border, light labels, subtext edges.
   Markers/edges follow --md-mermaid-edge-color automatically. */
[data-md-color-scheme] {
  --md-mermaid-node-bg-color: var(--ctp-surface0);
  --md-mermaid-node-fg-color: var(--ctp-lavender);
  --md-mermaid-edge-color: var(--ctp-subtext0);
  --md-mermaid-label-bg-color: var(--ctp-base);
  --md-mermaid-label-fg-color: var(--ctp-text);
}

/* Subgraph cluster boxes hardcode a flat grey (--md-default-fg-color--lightest)
   in the theme; give them a recessed Mantle fill + Surface2 border so the
   surface0 nodes inside clearly stand out. */
.mermaid .cluster rect {
  fill: var(--ctp-mantle);
  stroke: var(--ctp-surface2);
}

/* ===========================================================================
   Admonitions recolored to Catppuccin semantics (style guide):
   note=Blue, abstract=Sapphire, info=Sky, tip=Teal, success/question=Green,
   warning=Yellow, failure=Maroon, danger=Red, bug=Pink, example=Mauve,
   quote=Overlay.

   The theme's design is a single uniform box tint with a colored icon and no
   separate title-bar background, so we only override two things per type: the
   box tint and the icon color. (Docs currently use info + warning.)
   =========================================================================== */

/* note -> Blue */
.md-typeset .admonition.note,
.md-typeset details.note {
  background-color: color-mix(in srgb, var(--ctp-blue) 12%, transparent);
}
.md-typeset .note > .admonition-title::before,
.md-typeset .note > summary::before {
  background-color: var(--ctp-blue);
}

/* abstract / summary / tldr -> Sapphire */
.md-typeset .admonition.abstract, .md-typeset details.abstract,
.md-typeset .admonition.summary, .md-typeset details.summary,
.md-typeset .admonition.tldr, .md-typeset details.tldr {
  background-color: color-mix(in srgb, var(--ctp-sapphire) 12%, transparent);
}
.md-typeset .abstract > .admonition-title::before, .md-typeset .abstract > summary::before,
.md-typeset .summary > .admonition-title::before, .md-typeset .summary > summary::before,
.md-typeset .tldr > .admonition-title::before, .md-typeset .tldr > summary::before {
  background-color: var(--ctp-sapphire);
}

/* info / todo -> Sky */
.md-typeset .admonition.info, .md-typeset details.info,
.md-typeset .admonition.todo, .md-typeset details.todo {
  background-color: color-mix(in srgb, var(--ctp-sky) 12%, transparent);
}
.md-typeset .info > .admonition-title::before, .md-typeset .info > summary::before,
.md-typeset .todo > .admonition-title::before, .md-typeset .todo > summary::before {
  background-color: var(--ctp-sky);
}

/* tip / hint / important -> Teal */
.md-typeset .admonition.tip, .md-typeset details.tip,
.md-typeset .admonition.hint, .md-typeset details.hint,
.md-typeset .admonition.important, .md-typeset details.important {
  background-color: color-mix(in srgb, var(--ctp-teal) 12%, transparent);
}
.md-typeset .tip > .admonition-title::before, .md-typeset .tip > summary::before,
.md-typeset .hint > .admonition-title::before, .md-typeset .hint > summary::before,
.md-typeset .important > .admonition-title::before, .md-typeset .important > summary::before {
  background-color: var(--ctp-teal);
}

/* success / check / done / question / help / faq -> Green */
.md-typeset .admonition.success, .md-typeset details.success,
.md-typeset .admonition.check, .md-typeset details.check,
.md-typeset .admonition.done, .md-typeset details.done,
.md-typeset .admonition.question, .md-typeset details.question,
.md-typeset .admonition.help, .md-typeset details.help,
.md-typeset .admonition.faq, .md-typeset details.faq {
  background-color: color-mix(in srgb, var(--ctp-green) 12%, transparent);
}
.md-typeset .success > .admonition-title::before, .md-typeset .success > summary::before,
.md-typeset .check > .admonition-title::before, .md-typeset .check > summary::before,
.md-typeset .done > .admonition-title::before, .md-typeset .done > summary::before,
.md-typeset .question > .admonition-title::before, .md-typeset .question > summary::before,
.md-typeset .help > .admonition-title::before, .md-typeset .help > summary::before,
.md-typeset .faq > .admonition-title::before, .md-typeset .faq > summary::before {
  background-color: var(--ctp-green);
}

/* warning / caution / attention -> Yellow */
.md-typeset .admonition.warning, .md-typeset details.warning,
.md-typeset .admonition.caution, .md-typeset details.caution,
.md-typeset .admonition.attention, .md-typeset details.attention {
  background-color: color-mix(in srgb, var(--ctp-yellow) 12%, transparent);
}
.md-typeset .warning > .admonition-title::before, .md-typeset .warning > summary::before,
.md-typeset .caution > .admonition-title::before, .md-typeset .caution > summary::before,
.md-typeset .attention > .admonition-title::before, .md-typeset .attention > summary::before {
  background-color: var(--ctp-yellow);
}

/* failure / fail / missing -> Maroon */
.md-typeset .admonition.failure, .md-typeset details.failure,
.md-typeset .admonition.fail, .md-typeset details.fail,
.md-typeset .admonition.missing, .md-typeset details.missing {
  background-color: color-mix(in srgb, var(--ctp-maroon) 12%, transparent);
}
.md-typeset .failure > .admonition-title::before, .md-typeset .failure > summary::before,
.md-typeset .fail > .admonition-title::before, .md-typeset .fail > summary::before,
.md-typeset .missing > .admonition-title::before, .md-typeset .missing > summary::before {
  background-color: var(--ctp-maroon);
}

/* danger / error -> Red */
.md-typeset .admonition.danger, .md-typeset details.danger,
.md-typeset .admonition.error, .md-typeset details.error {
  background-color: color-mix(in srgb, var(--ctp-red) 12%, transparent);
}
.md-typeset .danger > .admonition-title::before, .md-typeset .danger > summary::before,
.md-typeset .error > .admonition-title::before, .md-typeset .error > summary::before {
  background-color: var(--ctp-red);
}

/* bug -> Pink */
.md-typeset .admonition.bug, .md-typeset details.bug {
  background-color: color-mix(in srgb, var(--ctp-pink) 12%, transparent);
}
.md-typeset .bug > .admonition-title::before, .md-typeset .bug > summary::before {
  background-color: var(--ctp-pink);
}

/* example -> Mauve */
.md-typeset .admonition.example, .md-typeset details.example {
  background-color: color-mix(in srgb, var(--ctp-mauve) 12%, transparent);
}
.md-typeset .example > .admonition-title::before, .md-typeset .example > summary::before {
  background-color: var(--ctp-mauve);
}

/* quote / cite -> Overlay */
.md-typeset .admonition.quote, .md-typeset details.quote,
.md-typeset .admonition.cite, .md-typeset details.cite {
  background-color: color-mix(in srgb, var(--ctp-overlay2) 12%, transparent);
}
.md-typeset .quote > .admonition-title::before, .md-typeset .quote > summary::before,
.md-typeset .cite > .admonition-title::before, .md-typeset .cite > summary::before {
  background-color: var(--ctp-overlay2);
}