/* ================================================================== */
/*  JuSPICE Documentation — custom stylesheet                          */
/*  Theme: Furo  (https://pradyunsg.me/furo/)                          */
/*  This file defines jp-* components, scrollbar style, and the code   */
/*  block / copy-button overrides below. Layout, sidebar, nav, and     */
/*  typography otherwise come from Furo.                               */
/* ================================================================== */

/* ------------------------------------------------------------------ */
/*  Box-sizing reset — without this, an element's own padding/border    */
/*  are added on TOP of an explicit width (the browser default,         */
/*  "content-box"), so e.g. .jp-card--full's width:100% + its .jp-card  */
/*  padding/border render wider than the .jp-card-grid row beneath it,  */
/*  even though both sit at 100% of the same parent. With border-box,   */
/*  width:100% always means the true, final rendered width — so a       */
/*  full-width card's left/right edges permanently line up with the     */
/*  left edge of the first card and the right edge of the last card in  */
/*  any jp-card-grid row beneath (or above) it, at every viewport size. */
/* ------------------------------------------------------------------ */
*,
*::before,
*::after {
    box-sizing: border-box;
}

/* ------------------------------------------------------------------ */
/*  JuSPICE palette — used by jp-* components below                    */
/* ------------------------------------------------------------------ */
:root {
    --jp-primary:   #0059b2;
    --jp-accent:    #0091a8;
    --jp-surface:   #ffffff;
    --jp-border:    #cfd8e8;
    --jp-muted:     #4a5e78;
    --jp-shadow-sm: 0 4px 14px rgba(7, 33, 71, 0.08);
    --jp-shadow:    0 10px 28px rgba(7, 33, 71, 0.13);
}

/* ------------------------------------------------------------------ */
/*  Dark mode disabled site-wide — hide Furo's light/dark/auto toggle.  */
/*  _static/no-dark-mode.js pins body[data-theme] to "light" so the     */
/*  page never renders in dark colors even with this button gone.      */
/* ------------------------------------------------------------------ */
.theme-toggle-container {
    display: none !important;
}

/* ------------------------------------------------------------------ */
/*  Scrollbars — identical appearance on every scrollable surface       */
/*  (main content, sidebar, code blocks, etc.)                         */
/* ------------------------------------------------------------------ */

/* Webkit: Chrome, Edge, Safari */
::-webkit-scrollbar              { width: 7px; height: 7px; }
::-webkit-scrollbar-track        { background: transparent; }
::-webkit-scrollbar-corner       { background: transparent; }
::-webkit-scrollbar-thumb        {
    background    : rgba(0, 89, 178, 0.28);
    border-radius : 99px;
}
::-webkit-scrollbar-thumb:hover  { background: rgba(0, 89, 178, 0.55); }

/* Firefox */
html {
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 89, 178, 0.28) transparent;
}

/* ------------------------------------------------------------------ */
/*  Homepage layout wrapper                                             */
/* ------------------------------------------------------------------ */
.juspice-homepage {
    display       : flex;
    flex-direction: column;
    gap           : 1.8rem;
    margin        : -0.5rem 0 0;
}

/* ------------------------------------------------------------------ */
/*  Hero section                                                        */
/* ------------------------------------------------------------------ */
.jp-hero {
    display               : grid;
    grid-template-columns : 1fr;
    gap                   : 1.5rem;
    background            : linear-gradient(135deg, #0c2d57 0%, #1150a0 58%, #1a6dcc 100%);
    color                 : #fff;
    border-radius         : 1.1rem;
    padding               : 2.2rem;
    margin-top            : 4rem;
    box-shadow            : var(--jp-shadow);
}

.jp-overview img {
    display      : block;
    width        : 100%;
    height       : auto;
    border-radius: 1.1rem;
    box-shadow   : var(--jp-shadow);
}

.jp-eyebrow {
    color      : #ffffff;
    font-size  : 0.88rem;
    margin     : 0;
}

.jp-eyebrow a {
    color          : #ffffff;
    text-decoration: none;
}

.jp-eyebrow a:hover,
.jp-eyebrow a:focus-visible {
    text-decoration: underline;
}

.jp-hero h1 {
    color      : #ffffff;
    margin     : 0.15rem 0 0;
    font-size  : 2.4rem;
    font-weight: 800;
}

.jp-tagline {
    font-size  : 1.02rem;
    margin     : 0.5rem 0;
    color      : #d0e8ff;
    font-style : italic;
    font-weight: 700;
}

.jp-tagline__letter {
    font-size      : 1.35em;
    text-decoration: underline;
    text-underline-offset: 0.12em;
}

.jp-summary {
    color        : #c8e2ff;
    margin-bottom: 1.1rem;
    max-width    : 58ch;
    font-size    : 0.95rem;
}

.jp-cta-group {
    display  : flex;
    flex-wrap: nowrap;
    gap      : 0.5rem;
    overflow-x: auto;
}

.jp-btn {
    display        : inline-flex;
    align-items    : center;
    justify-content: center;
    text-decoration: none;
    border         : 1.5px solid rgba(255, 255, 255, 0.48);
    color          : #fff;
    border-radius  : 999px;
    padding        : 0.46rem 0.9rem;
    font-weight    : 600;
    font-size      : 0.86rem;
    white-space    : nowrap;
    flex-shrink    : 0;
    transition     : transform 0.18s ease, background-color 0.18s ease;
}

.jp-btn:hover,
.jp-btn:focus-visible {
    transform      : translateY(-1px);
    background     : rgba(255, 255, 255, 0.17);
    color          : #fff;
    text-decoration: none;
}

.jp-btn--primary {
    background  : #ffffff;
    color       : #0d3d6f;
    border-color: #ffffff;
}

.jp-btn--primary:hover {
    background: #e8f2ff;
    color     : #0d3d6f;
}

/* ------------------------------------------------------------------ */
/*  Card grids                                                          */
/* ------------------------------------------------------------------ */
.jp-card-grid {
    display               : grid;
    grid-template-columns : repeat(4, minmax(0, 1fr));
    gap                   : 0.8rem;
}

.jp-card-grid--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.jp-card-grid--two   { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.jp-card {
    background   : var(--jp-surface);
    border       : 1px solid var(--jp-border);
    border-radius: 0.85rem;
    padding      : 0.85rem;
    box-shadow   : 0 3px 10px rgba(22, 46, 88, 0.07);
    transition   : transform 0.18s ease, box-shadow 0.18s ease;
    display      : flex;
    flex-direction: column;
}

.jp-card:hover,
.jp-card:focus-within {
    transform : translateY(-3px);
    box-shadow: 0 10px 24px rgba(22, 46, 88, 0.14);
}

.jp-card--link {
    display        : flex;
    flex-direction : column;
    text-decoration: none;
    color          : inherit;
}

.jp-card--link:hover,
.jp-card--link:focus-visible {
    text-decoration: none;
    color          : inherit;
}

.jp-card h4 {
    margin     : 0 0 0.2rem;
    font-size  : 0.92rem;
    color      : #0d2b52;
    font-weight: 700;
}

.jp-card p {
    margin     : 0 0 0.5rem;
    font-size  : 0.84rem;
    color      : var(--jp-muted);
    line-height: 1.5;
    flex       : 1;           /* grows to push thumbnail to card bottom */
}

.jp-card img {
    width        : 100%;
    height       : 64px;
    object-fit   : cover;
    border-radius: 0.5rem;
    border       : 1px solid var(--jp-border);
    display      : block;
}

/* Full-width variant — a single card spanning the whole row instead of
   sitting in a jp-card-grid, e.g. a lone linked card placed below a grid,
   or a non-interactive info banner placed above one. On wide viewports
   the heading sits beside the paragraph rather than above it, reading as
   a banner rather than a tile. */
.jp-card--full {
    width      : 100%;
    margin-top : 0.8rem;
    margin-bottom: 0.8rem;
}

@media (min-width: 641px) {
    .jp-card--full {
        flex-direction: row;
        align-items   : center;
        gap           : 1.2rem;
    }

    .jp-card--full h4 {
        flex     : 0 0 auto;
        min-width: 10rem;
        margin   : 0;
    }

    .jp-card--full p {
        margin: 0;
    }

    /* Keep a card's thumbnail a small fixed-size tile beside the text
       instead of the full-width banner .jp-card img is normally sized
       for — only at this row-layout breakpoint; below it, the card
       stacks and the thumbnail reverts to the normal full-width look. */
    .jp-card--full img {
        order : 3;
        flex  : 0 0 auto;
        width : 7rem;
        height: 64px;
    }
}

/* Non-interactive info card — same shell as .jp-card but nothing to
   click, so the hover-lift (which otherwise implies interactivity) is
   cancelled, and a faint tint distinguishes it from the clickable nav
   cards around it. */
.jp-card--info {
    background: linear-gradient(135deg, rgba(0, 89, 178, 0.06), rgba(0, 145, 168, 0.05));
}

.jp-card--info:hover,
.jp-card--info:focus-within {
    transform : none;
    box-shadow: 0 3px 10px rgba(22, 46, 88, 0.07);
}

/* Non-interactive caution card — same shell as .jp-card--info, but an
   amber tint plus a warning-sign heading mark content the reader should
   pay extra attention to (e.g. a disk-space warning), rather than a
   plain aside. */
.jp-card--caution {
    background  : linear-gradient(135deg, rgba(196, 130, 0, 0.12), rgba(196, 130, 0, 0.04));
    border-color: rgba(196, 130, 0, 0.35);
}

.jp-card--caution:hover,
.jp-card--caution:focus-within {
    transform : none;
    box-shadow: 0 3px 10px rgba(22, 46, 88, 0.07);
}

.jp-card--caution h4 {
    color: #8a5200;
}

.jp-card--caution ul {
    margin      : 0.4rem 0 0.6rem;
    padding-left: 1.2rem;
}

.jp-card--caution li {
    font-size    : 0.84rem;
    color        : var(--jp-muted);
    line-height  : 1.5;
    margin-bottom: 0.4rem;
}

.jp-card--caution li:last-child {
    margin-bottom: 0;
}

/* .jp-card--full normally puts the heading beside the paragraph in a row
   (see above) — fine for a one-line banner, but this card's body is a
   whole bulleted breakdown, so it needs to stack top-to-bottom instead,
   at every viewport width. */
.jp-card--full.jp-card--caution {
    flex-direction: column;
    align-items   : stretch;
}

.jp-card--full.jp-card--caution h4 {
    min-width: 0;
}

/* Generic opt-in for any other full-width card whose body is too long
   for the side-by-side layout (multiple paragraphs/lists) — same
   stacking fix as .jp-card--caution above, without tying it to the
   caution color scheme. */
.jp-card--full.jp-card--stack {
    flex-direction: column;
    align-items   : stretch;
}

.jp-card--full.jp-card--stack h4 {
    min-width: 0;
}

.jp-card--full.jp-card--stack ul {
    margin      : 0.4rem 0 0.6rem;
    padding-left: 1.2rem;
}

.jp-card--full.jp-card--stack li {
    font-size    : 0.84rem;
    color        : var(--jp-muted);
    line-height  : 1.5;
    margin-bottom: 0.4rem;
}

.jp-card--full.jp-card--stack li:last-child {
    margin-bottom: 0;
}

/* ------------------------------------------------------------------ */
/*  Funding page — logo + heading lockup                                */
/* ------------------------------------------------------------------ */
.jp-funding-header {
    display    : flex;
    align-items: center;
    gap        : 1rem;
    flex-wrap  : wrap;
}

.jp-funding-header h2 {
    margin: 0;
}

.jp-funding-logo {
    height     : 5.5rem;
    width      : auto;
    flex       : 0 0 auto;
    margin-left: auto;
}

/* ------------------------------------------------------------------ */
/*  Homepage footer strip                                               */
/* ------------------------------------------------------------------ */
.jp-footer {
    margin-top : 2.5rem;
    padding-top: 1.5rem;
    border-top : 1px solid var(--jp-border);
    text-align : center;
}

.jp-footer p {
    color    : var(--jp-muted);
    font-size: 0.85rem;
    margin   : 0;
}

/* ------------------------------------------------------------------ */
/*  AI-generated illustration captions                                  */
/* ------------------------------------------------------------------ */
/* AI badge (_static/label_ai.png, made from "LABEL_AI GENERATED_black.png")
   on the top-right corner of EVERY AI-generated image:
     - captioned figures (:figclass: jp-ai-figure) get it via ::before below;
     - every other AI <img> (_static/home/*, the sidebar logo
       _static/logo_tutorial.png) is wrapped in span.jp-ai-badged by
       _static/ai-badge.js and gets it via ::after.
   Size is 227 x 72 px (3x the original 72 x 24 badge). On images too small
   to hold that (e.g. 64 px card thumbnails) it shrinks, keeping its aspect
   ratio, to at most 60 % of the image width and 45 % of its height. */
:root {
    --jp-ai-badge-w: 227px;
    --jp-ai-badge-h: 72px;
}

figure.jp-ai-figure,
div.figure.jp-ai-figure {
    position    : relative;
    display     : table;
    margin-left : auto;
    margin-right: auto;
}

.jp-ai-badged {
    position: relative;
    display : block;
}

.jp-ai-badged > img {
    width: 100%;
}

figure.jp-ai-figure::before,
div.figure.jp-ai-figure::before,
.jp-ai-badged::after {
    content       : "";
    position      : absolute;
    top           : 6px;
    right         : 6px;
    width         : var(--jp-ai-badge-w);
    height        : var(--jp-ai-badge-h);
    max-width     : 60%;
    max-height    : 45%;
    background    : url("label_ai.png") no-repeat right top / contain;
    pointer-events: none;
    z-index       : 1;
}

/* Sidebar logo keeps its natural size; the wrapper shrinks to fit it. */
.sidebar-logo-container .jp-ai-badged {
    display: inline-block;
}

.sidebar-logo-container .jp-ai-badged > img {
    width: auto;
}

/* In the wide-viewport banner card the thumbnail is a flex item; the
   wrapper takes over its flex placement and fixed size. */
@media (min-width: 641px) {
    .jp-card--full > .jp-ai-badged {
        order: 3;
        flex : 0 0 auto;
        width: 7rem;
    }
}

.jp-ai-figure .caption,
.jp-ai-figure figcaption {
    color      : var(--jp-muted);
    font-size  : 0.78rem;
    font-style : italic;
    text-align : center;
    margin-top : 0.35rem;
}

/* ------------------------------------------------------------------ */
/*  Responsive breakpoints for card grids                               */
/* ------------------------------------------------------------------ */
@media (max-width: 1200px) {
    .jp-card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 1000px) {
    .jp-card-grid,
    .jp-card-grid--three { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 840px) {
    .jp-hero { padding: 1.4rem; }
    .jp-card-grid,
    .jp-card-grid--three,
    .jp-card-grid--two { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
    * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* ------------------------------------------------------------------ */
/*  Code blocks — black background, bold 14px monospace, and a copy     */
/*  button that stays visible instead of only appearing on hover.       */
/*  (Inline `code` spans are untouched — this targets literal/code-     */
/*  block boxes only.)                                                  */
/* ------------------------------------------------------------------ */
:root {
    --color-code-background: #000000;
    --color-code-foreground: #f5f5f5;
    --code-font-size: 14px;
}

/* Pygments (syntax-highlighted `.. code-block::` output) ships its own
   `.highlight { background: ... }` rule per pygments_style (see conf.py);
   override it directly so every code box is pure black regardless of
   style. Plain, non-highlighted `::` literal blocks already pick up
   black from the --color-code-background variable above. */
.highlight,
.highlight pre {
    background-color: #000000;
}

.highlight pre,
pre.literal-block {
    font-weight: 700;
}

.highlight button.copybtn {
    opacity: 1 !important;
    background-color: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.35);
    color: #f5f5f5;
}

.highlight button.copybtn:hover {
    background-color: rgba(255, 255, 255, 0.24);
}

.highlight button.copybtn:active {
    background-color: rgba(255, 255, 255, 0.38);
}

.highlight button.copybtn.success {
    border-color: #3fb950;
    color: #3fb950;
}