/* =====================================================================
   Cassette-futurism overrides for docs.juliaactuary.org.
   Injected into every aggregated page via MultiDocumenter's
   `custom_stylesheets`, on top of Documenter.jl's own themes.

   The JuliaActuary brand (juliaactuary.org) ships a light "paper" look; this
   file provides BOTH a light skin and a matching dark one:

     • LIGHT  (default + documenter-light)  -> cassette "paper": cream
       surfaces, bold sans-serif headings, red/amber accents.
     • DARK   (documenter-dark)             -> cassette "night": the same
       identity inverted — deep navy-ink surfaces, warm paper text, amber/red
       accents. documenter-dark is the primary dark theme, so this is what a
       reader with an OS dark preference gets.
     • catppuccin latte/frappe/macchiato/mocha are left NATIVE as alternative
       options in the theme picker.

   Brand typography (Inter / Atkinson Hyperlegible / JuliaMono) applies in every
   theme. Documenter marks the active theme with a `theme--<name>` class on
   <html> (empty class = default light). Each skin is scoped to its theme(s)
   so it never bleeds into another — the previous dark-mode breakage came from
   the light paper palette being pinned with !important under documenter-dark's
   light text (cream backgrounds + white text). The dark skin below layers on
   documenter-dark, remapping its green-charcoal neutrals to navy.
   ===================================================================== */

/* Body text uses a pinned, local Inter subset. The variable font covers
   regular through bold and includes the slant axis for oblique text.
   Atkinson headings are linked in the document head. */
@font-face {
    font-family: "Inter";
    src: url("webfonts/Inter-Variable-Web.woff2") format("woff2");
    font-weight: 400 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Inter";
    src: url("webfonts/Inter-Variable-Web.woff2") format("woff2");
    font-weight: 400 700;
    font-style: oblique 0deg 10deg;
    font-display: swap;
}
@font-face {
    font-family: "JuliaMono";
    src: url("webfonts/JuliaMono-Regular-Web.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "JuliaMono";
    src: url("webfonts/JuliaMono-Bold-Web.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

:root {
    --cf-paper:        #F0EDE3;
    --cf-paper-deep:   #E6E2D5;
    --cf-paper-bright: #F7F4EB;
    --cf-ink:          #1B2A3A;
    --cf-ink-soft:     #3C4A5C;
    --cf-rule:         #B6AD90;
    --cf-red:          #B5321E;
    --cf-rust:         #974413;
    --cf-amber:        #D4A017;
    --cf-blue:         #1F4E79;
}

/* ---- Typography — applied in ALL themes -------------------------------
   Inter body / Atkinson Hyperlegible headings / JuliaMono code.
   Colour is NOT set here; only the type, so the brand fonts survive into
   dark mode while each theme keeps its own colours.
   --------------------------------------------------------------------- */
html, body {
    font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif !important;
}
h1, h2, h3, h4, h5, h6, .docs-package-name,
.docs-main h1, .docs-main h2, .docs-main h3, .docs-main h4, .docs-main h5, .docs-main h6 {
    font-family: "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", sans-serif !important;
    font-weight: 700 !important;
    line-height: 1.25;
    overflow-wrap: anywhere;
}
pre, code, kbd, samp,
.docs-main pre, .docs-main code {
    font-family: "JuliaMono", ui-monospace, monospace !important;
}

/* Inline identifiers may wrap; code blocks keep their own horizontal scroll. */
:not(pre) > code {
    white-space: normal;
    overflow-wrap: anywhere;
}
pre {
    max-width: 100%;
    overflow-x: auto;
}

/* Reading layout C: comfortable prose, restrained headings, quiet inline
   identifiers. Wide examples, tables, and figures retain Documenter's width. */
html:root #documenter .docs-main > article.content {
    font-size: 1rem;
    line-height: 1.75;
}
html:root #documenter .docs-main .content p,
html:root #documenter .docs-main .content ul,
html:root #documenter .docs-main .content ol,
html:root #documenter .docs-main .content blockquote {
    max-width: 64ch;
}
html:root #documenter .docs-main .content :is(p, ul, ol, blockquote):has(pre, table, img, .katex-display) {
    max-width: none;
}
html:root #documenter .docs-main .content p:not(:last-child) {
    margin-bottom: 1.25em;
}
html:root #documenter .docs-main .content h1 { font-size: 1.8rem; }
html:root #documenter .docs-main .content h2 { font-size: 1.4rem; }
html:root #documenter .docs-main .content h3 { font-size: 1.2rem; }
html:root #documenter .docs-main .content h4 { font-size: 1.05rem; }
html:root #documenter .docs-main .content h5,
html:root #documenter .docs-main .content h6 { font-size: 1rem; }
html:root #documenter .docs-main .content h2,
html:root #documenter .docs-main .content h3,
html:root #documenter .docs-main .content h4,
html:root #documenter .docs-main .content h5,
html:root #documenter .docs-main .content h6 {
    margin-top: 2rem;
    margin-bottom: 1.25rem;
}
html:root #documenter .docs-main :not(pre) > code {
    background: transparent !important;
    color: inherit !important;
    padding: 0;
    font-size: .9em;
}
html:root #documenter .docs-main pre > code {
    background: transparent !important;
    line-height: 1.5;
}

/* ---- Cassette "paper" palette — LIGHT experience only ----------------
   Scope = the default light theme + explicitly-chosen documenter-light.
   Excluded: documenter-dark and every catppuccin theme, so those keep
   their native (readable) palettes instead of being stomped with cream.
   --------------------------------------------------------------------- */
html:not(.theme--documenter-dark):not(.theme--catppuccin-latte):not(.theme--catppuccin-frappe):not(.theme--catppuccin-macchiato):not(.theme--catppuccin-mocha) {
    background-color: var(--cf-paper) !important;
    color: var(--cf-ink);

    body {
        background-color: var(--cf-paper) !important;
        color: var(--cf-ink);
    }

    h1, h2, h3, h4, h5, h6 { color: var(--cf-ink); }

    a          { color: var(--cf-red); }
    a:hover,
    a:focus    { color: var(--cf-rust); }
    :focus-visible { outline: 3px solid var(--cf-blue); outline-offset: 3px; }
    /* Section headings are anchors too; keep them ink, not link-red
       (docstring bindings, `a.docstring-binding`, stay accent-coloured). */
    a.docs-heading-anchor,
    a.docs-heading-anchor:hover,
    a.docs-heading-anchor:focus { color: var(--cf-ink) !important; }

    pre, .docs-main pre {
        background-color: var(--cf-paper-bright) !important;
        border: 1px solid var(--cf-rule) !important;
        border-radius: 3px;
    }
    :not(pre) > code, .docs-main :not(pre) > code {
        background-color: transparent !important;
        color: var(--cf-ink) !important;
    }

    /* Documenter sidebar — keep its layout, shift to the paper palette. */
    .docs-sidebar { background-color: var(--cf-paper-deep) !important; border-right: 1px solid var(--cf-rule); }
    .docs-sidebar a { color: var(--cf-ink-soft); }
    .docs-sidebar a:hover { color: var(--cf-red); }
    .docs-sidebar .docs-menu li.is-active > a.tocitem,
    .docs-sidebar .docs-menu li.is-active > label.tocitem {
        background-color: var(--cf-paper-bright);
        box-shadow: inset 3px 0 0 var(--cf-amber);
        color: var(--cf-ink) !important;
    }

    /* Blockquotes, hr, tables — small touches. */
    blockquote {
        border-left: 3px solid var(--cf-amber) !important;
        color: var(--cf-ink-soft);
        background: transparent;
    }
    hr { border-color: var(--cf-rule); opacity: 0.7; }
    table thead { border-bottom: 1.5px solid var(--cf-ink) !important; }
    table tbody tr { border-color: var(--cf-rule); }
}

/* ---- Cassette "night" palette — dark experience ----------------------
   A dark form of the cassette brand: deep navy-ink surfaces, warm paper
   text, amber/red accents (the light theme, inverted). Layered over
   Documenter's `documenter-dark` theme, remapping its green-charcoal
   neutrals — base #1f2424, panels #282f2f, hover #32393a, rules #5e6d6f —
   to navy equivalents at matched lightness, so the whole page reads as one
   cassette surface. documenter-dark is the primary dark theme, so this is
   what OS-dark visitors get; the catppuccin themes remain native options.
   Overrides use !important to sit on top of the compiled theme.
   --------------------------------------------------------------------- */
html.theme--documenter-dark {
    --cf-night-bg:      #14202D;  /* page base   (was #1f2424) */
    --cf-night-panel:   #1B2A39;  /* raised panel(was #282f2f) */
    --cf-night-hover:   #24374A;  /* hover/chip  (was #32393a) */
    --cf-night-border:  #38495C;  /* rules       (was #5e6d6f) */
    --cf-night-text:    #E7E2D6;  /* body text   (was #dbdee0) */
    --cf-night-head:    #F0EDE3;  /* headings — bright paper   */
    --cf-night-soft:    #A7B2BF;  /* muted text               */
    --cf-night-link:    #EE7A54;  /* links — brightened cf-red */
    --cf-night-amber:   #E3B23C;  /* accent/hover — cf-amber   */

    background-color: var(--cf-night-bg) !important;
    color: var(--cf-night-text) !important;

    :focus-visible { outline: 3px solid var(--cf-night-amber); outline-offset: 3px; }
}

/* Base surfaces */
html.theme--documenter-dark body,
html.theme--documenter-dark #documenter .docs-main {
    background-color: var(--cf-night-bg) !important;
    color: var(--cf-night-text) !important;
}
html.theme--documenter-dark .content { color: var(--cf-night-text) !important; }

/* Headings — bright paper, with shared bold typography. */
html.theme--documenter-dark h1, html.theme--documenter-dark h2,
html.theme--documenter-dark h3, html.theme--documenter-dark h4,
html.theme--documenter-dark h5, html.theme--documenter-dark h6,
html.theme--documenter-dark .content h1, html.theme--documenter-dark .content h2,
html.theme--documenter-dark .content h3, html.theme--documenter-dark .content h4,
html.theme--documenter-dark .content h1 code, html.theme--documenter-dark .content h2 code {
    color: var(--cf-night-head) !important;
}

/* Body links — cassette night-red, amber on hover */
html.theme--documenter-dark .content a,
html.theme--documenter-dark .docs-main article a {
    color: var(--cf-night-link) !important;
}
html.theme--documenter-dark .content a:hover,
html.theme--documenter-dark .content a code:hover,
html.theme--documenter-dark .docs-main article a:hover {
    color: var(--cf-night-amber) !important;
}
html.theme--documenter-dark .content a code { color: var(--cf-night-link) !important; }

/* Section-heading anchors: paper, not link-coloured. `.content`-qualified so
   this beats the `.content a` rule above (docstring bindings keep the accent). */
html.theme--documenter-dark .content a.docs-heading-anchor,
html.theme--documenter-dark .content a.docs-heading-anchor:hover,
html.theme--documenter-dark .content a.docs-heading-anchor:focus,
html.theme--documenter-dark h1 a.docs-heading-anchor,
html.theme--documenter-dark h2 a.docs-heading-anchor,
html.theme--documenter-dark h3 a.docs-heading-anchor {
    color: var(--cf-night-head) !important;
}

/* Code — navy panels instead of green-charcoal */
html.theme--documenter-dark pre,
html.theme--documenter-dark .content pre {
    background-color: var(--cf-night-panel) !important;
    border: 1px solid var(--cf-night-border) !important;
    color: var(--cf-night-text) !important;
}
html.theme--documenter-dark code,
html.theme--documenter-dark :not(pre) > code {
    background-color: var(--cf-night-hover) !important;
    color: var(--cf-night-text) !important;
}

/* Sidebar */
html.theme--documenter-dark #documenter .docs-sidebar {
    background-color: #101A25 !important;
    border-right: 1px solid var(--cf-night-border) !important;
}
html.theme--documenter-dark #documenter .docs-sidebar .docs-package-name a { color: var(--cf-night-head) !important; }
html.theme--documenter-dark #documenter .docs-sidebar ul.docs-menu .tocitem,
html.theme--documenter-dark #documenter .docs-sidebar ul.docs-menu .tocitem:hover {
    background: transparent !important;
    color: var(--cf-night-soft) !important;
}
html.theme--documenter-dark #documenter .docs-sidebar ul.docs-menu a.tocitem:hover,
html.theme--documenter-dark #documenter .docs-sidebar ul.docs-menu label.tocitem:hover {
    background-color: var(--cf-night-hover) !important;
    color: var(--cf-night-head) !important;
}
html.theme--documenter-dark #documenter .docs-sidebar ul.docs-menu li.is-active > a.tocitem,
html.theme--documenter-dark #documenter .docs-sidebar ul.docs-menu li.is-active > label.tocitem,
html.theme--documenter-dark #documenter .docs-sidebar ul.docs-menu li.is-active > a.tocitem:hover,
html.theme--documenter-dark #documenter .docs-sidebar ul.docs-menu li.is-active > label.tocitem:hover {
    background-color: var(--cf-night-panel) !important;
    color: var(--cf-night-head) !important;
    border-color: var(--cf-night-border) !important;
    box-shadow: inset 3px 0 0 var(--cf-night-amber) !important;  /* amber accent, echoes light theme */
}
html.theme--documenter-dark #documenter .docs-sidebar ul.docs-menu > li li { border-color: var(--cf-night-border) !important; }
html.theme--documenter-dark #documenter .docs-sidebar { border-color: var(--cf-night-border) !important; }

/* Top navbar / breadcrumb */
html.theme--documenter-dark #documenter .docs-main header.docs-navbar {
    background-color: var(--cf-night-bg) !important;
    border-bottom: 1px solid var(--cf-night-border) !important;
    box-shadow: none !important;
}
/* Navbar links + icons (breadcrumb, GitHub, settings) — paper/soft, amber
   hover, replacing documenter-dark's teal so the top bar reads cassette. */
html.theme--documenter-dark #documenter .docs-main header.docs-navbar a,
html.theme--documenter-dark #documenter .docs-main header.docs-navbar .docs-navbar-link {
    color: var(--cf-night-soft) !important;
}
html.theme--documenter-dark #documenter .docs-main header.docs-navbar a:hover,
html.theme--documenter-dark #documenter .docs-main header.docs-navbar .docs-navbar-link:hover {
    color: var(--cf-night-amber) !important;
}

/* Docstrings */
html.theme--documenter-dark .docstring {
    border: 1px solid var(--cf-night-border) !important;
    background-color: var(--cf-night-bg) !important;
}
html.theme--documenter-dark .docstring > header,
html.theme--documenter-dark .docstring > summary {
    background-color: var(--cf-night-panel) !important;
    border-bottom: 1px solid var(--cf-night-border) !important;
}
html.theme--documenter-dark .docstring-category { color: var(--cf-night-amber) !important; }

/* Admonitions — navy body, keep the coloured accent borders */
html.theme--documenter-dark .admonition { background-color: var(--cf-night-panel) !important; }
html.theme--documenter-dark .admonition-body { color: var(--cf-night-text) !important; }
html.theme--documenter-dark .admonition-body code { background-color: var(--cf-night-hover) !important; }

/* Blockquote — amber rule to echo the light theme */
html.theme--documenter-dark .content blockquote {
    background-color: var(--cf-night-panel) !important;
    border-left: 5px solid var(--cf-night-amber) !important;
    color: var(--cf-night-text) !important;
}

/* Tables */
html.theme--documenter-dark .content table td,
html.theme--documenter-dark .content table th {
    border-color: var(--cf-night-border) !important;
    color: var(--cf-night-text) !important;
}
html.theme--documenter-dark .content table th { background-color: var(--cf-night-panel) !important; }
html.theme--documenter-dark .content table tr:nth-child(even) { background-color: rgba(255, 255, 255, 0.02) !important; }

/* Rules + source-link button */
html.theme--documenter-dark hr { background-color: var(--cf-night-border) !important; }
html.theme--documenter-dark details.docstring > section > a.button.docs-sourcelink {
    background-color: var(--cf-night-panel) !important;
    border: 1px solid var(--cf-night-border) !important;
    color: var(--cf-night-soft) !important;
}

/* Footer + prev/next pagination */
html.theme--documenter-dark #documenter .docs-main .docs-footer { border-top: 1px solid var(--cf-night-border) !important; }
html.theme--documenter-dark .pagination-previous,
html.theme--documenter-dark .pagination-next,
html.theme--documenter-dark .pagination-link {
    border-color: var(--cf-night-border) !important;
    color: var(--cf-night-text) !important;
}
html.theme--documenter-dark .pagination-previous:hover,
html.theme--documenter-dark .pagination-next:hover,
html.theme--documenter-dark .pagination-link:hover {
    border-color: var(--cf-night-amber) !important;
    color: var(--cf-night-amber) !important;
}

/* Settings + search modals (the theme picker the reader opens to switch modes;
   documenter-dark renders the modal body #fff, which would flash white here) */
html.theme--documenter-dark .modal-card-head,
html.theme--documenter-dark .modal-card-foot {
    background-color: var(--cf-night-panel) !important;
    border-color: var(--cf-night-border) !important;
}
html.theme--documenter-dark .modal-card-title { color: var(--cf-night-head) !important; }
html.theme--documenter-dark .modal-card-body {
    background-color: var(--cf-night-bg) !important;
    color: var(--cf-night-text) !important;
}

/* Form controls — settings selects/inputs + the sidebar search field/button */
html.theme--documenter-dark .select select,
html.theme--documenter-dark .input,
html.theme--documenter-dark .textarea,
html.theme--documenter-dark #documenter .docs-sidebar .docs-search-query,
html.theme--documenter-dark #documenter .docs-sidebar form.docs-search > input {
    background-color: var(--cf-night-panel) !important;
    border-color: var(--cf-night-border) !important;
    color: var(--cf-night-soft) !important;
}

/* Subsection links use indentation, leaving the active-page stripe on its
   own row. Documenter's generated bullet otherwise crowds the tree border. */
html:root #documenter .docs-sidebar ul.docs-menu li.is-active {
    background: transparent !important;
    border-block: 0 !important;
    box-shadow: none !important;
}
html:root #documenter .docs-sidebar ul.docs-menu ul.internal {
    border-top: 0;
    margin: .125rem .5rem .75rem;
}
html:root #documenter .docs-sidebar ul.docs-menu ul.internal li {
    border-left: 0 !important;
    margin-top: 0;
}
html:root #documenter .docs-sidebar ul.docs-menu ul.internal .tocitem {
    padding: .375rem .5rem .375rem 1rem;
    font-size: .875rem;
    line-height: 1.5;
    box-shadow: none !important;
}
html:root #documenter .docs-sidebar ul.docs-menu ul.internal .tocitem::before {
    content: none;
}

/* ---- MultiDocumenter top navigation strip -----------------------------
   Always-dark brand chrome (deep ink + amber rule). Kept in every theme —
   it uses fixed brand colours, not the paper palette, so it stays correct
   in light and dark alike. `body > nav:first-of-type` targets only a nav
   that is a direct child of <body> (the injected aggregation strip), never
   the Documenter `.docs-sidebar`, which is nested under #documenter.
   --------------------------------------------------------------------- */
.MultiDocumenter,
.multi-doc-nav,
#multi-docs-navbar,
body > nav:first-of-type {
    background-color: var(--cf-ink) !important;
    border-bottom: 2px solid var(--cf-amber) !important;
    color: var(--cf-paper);
}
.MultiDocumenter a,
.multi-doc-nav a,
#multi-docs-navbar a,
body > nav:first-of-type a {
    color: var(--cf-paper) !important;
}
.MultiDocumenter a:hover,
.multi-doc-nav a:hover,
#multi-docs-navbar a:hover,
body > nav:first-of-type a:hover {
    color: var(--cf-amber) !important;
}

/* Brand navigation has its own high-contrast focus color in every theme. */
body > nav:first-of-type :focus-visible {
    outline: 3px solid var(--cf-amber);
    outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

/* Keep global search on the navigation strip and its results on brand surfaces. */
#multi-page-nav {
    --cf-search-bg: var(--cf-paper-bright);
    --cf-search-hover: var(--cf-paper-deep);
    --cf-search-text: var(--cf-ink);
    --cf-search-soft: var(--cf-ink-soft);
    --cf-search-rule: var(--cf-rule);
    --cf-search-focus: var(--cf-blue);
}
html.theme--documenter-dark #multi-page-nav {
    --cf-search-bg: var(--cf-night-panel);
    --cf-search-hover: var(--cf-night-hover);
    --cf-search-text: var(--cf-night-text);
    --cf-search-soft: var(--cf-night-soft);
    --cf-search-rule: var(--cf-night-border);
    --cf-search-focus: var(--cf-night-amber);
}
#multi-page-nav .search #search-input {
    min-height: 40px;
    font-size: 1rem;
    color: var(--cf-paper);
    border-color: var(--cf-rule);
}
#multi-page-nav .search #search-input::placeholder { color: var(--cf-paper); }
#multi-page-nav .search:focus-within #search-input,
html.theme--documenter-dark #multi-page-nav .search:focus-within #search-input {
    background: var(--cf-search-bg);
    color: var(--cf-search-text);
    outline: 2px solid var(--cf-amber);
    outline-offset: 2px;
}
#multi-page-nav .search:focus-within #search-input::placeholder { color: var(--cf-search-soft); }
#multi-page-nav .suggestions,
html.theme--documenter-dark #multi-page-nav .suggestions {
    background: var(--cf-search-bg);
    border: 1px solid var(--cf-search-rule);
    border-radius: 3px;
    min-width: 0;
    width: min(36rem, calc(100vw - 2rem));
    max-width: calc(100vw - 2rem);
    max-height: min(50dvh, 24rem);
    right: 1rem;
    margin: .25rem 0;
}
#multi-page-nav .suggestions a { color: var(--cf-search-text) !important; }
#multi-page-nav .suggestions .suggestion {
    word-break: normal;
    overflow-wrap: anywhere;
}
#multi-page-nav .suggestions .suggestion .suggestion-excerpt,
html.theme--documenter-dark #multi-page-nav .suggestions .suggestion .suggestion-excerpt { color: var(--cf-search-soft); }
#multi-page-nav .suggestions .suggestion-header:hover,
html.theme--documenter-dark #multi-page-nav .suggestions .suggestion-header:hover,
#multi-page-nav .suggestions .suggestion-header:focus,
html.theme--documenter-dark #multi-page-nav .suggestions .suggestion-header:focus { background: var(--cf-search-hover); }
#multi-page-nav .suggestions .suggestion-header:focus-visible {
    outline: 3px solid var(--cf-search-focus);
    outline-offset: -3px;
}
#multi-page-nav .suggestions mark,
html.theme--documenter-dark #multi-page-nav .suggestions mark {
    background: var(--cf-amber);
    color: var(--cf-ink);
}
#multi-page-nav #multidoc-toggler {
    align-items: center;
    gap: .5rem;
    color: var(--cf-paper);
}
#multi-page-nav #multidoc-toggler::before {
    content: "Packages";
    font: 700 1rem "Atkinson Hyperlegible", system-ui, sans-serif;
}

/* Seven package links plus search need more room than MultiDocumenter's
   default breakpoint. Collapse before they wrap over the document toolbar. */
@media screen and (max-width: 1600px) {
    #multi-page-nav { height: auto; min-height: var(--navbar-height); flex-wrap: wrap; }
    #multi-page-nav #nav-items {
        flex: 1 0 100%;
        order: 2;
        flex-direction: column;
        flex-wrap: nowrap;
        min-width: 0;
        margin-top: 1rem;
    }
    #multi-page-nav .hidden-on-mobile { display: none !important; }
    #multi-page-nav .nav-item {
        line-height: 1.5;
        padding: .5rem 0;
        width: 100%;
        min-height: 44px;
    }
    #multi-page-nav #multidoc-toggler { display: inline-flex; }
    #multi-page-nav .search #search-input { width: 100%; min-height: 44px; }
}

/* Upstream package logos often contain black lettering. Give them the same
   paper plate used by the main site's navigation so they work in dark mode. */
html.theme--documenter-dark .docs-sidebar .docs-logo img {
    background: var(--cf-paper);
    border: 1px solid var(--cf-amber);
    border-radius: 3px;
    padding: .25rem;
}