/* default.css */


/* Make the header transparent and let mouse clicks pass through it.
   We must force pointer-events:none on ALL descendants with !important
   because Streamlit's own CSS sets pointer-events:auto on internal
   elements (stToolbar, etc.), overriding simple inheritance. */
header[data-testid="stHeader"],
header[data-testid="stHeader"] * {
    background-color: transparent !important;
    pointer-events: none !important;
}
/* Re-enable clicks only on actual interactive elements (deploy button, hamburger menu) */
header[data-testid="stHeader"] button,
header[data-testid="stHeader"] a,
header[data-testid="stHeader"] [role="button"] {
    pointer-events: auto !important;
}

/* Changes the default font of the web page to Arial */
.stApp {
    font-family: Arial, Helvetica, sans-serif !important;
}

/* Removes the default streamlit padding at the top of the page */
.stMainBlockContainer {
    padding-top: 0;
    padding-bottom: 0;
}
 
/* Makes st_br invisible as it should be*/
.stElementContainer {
    min-width: 0;
}

/* Removes margins of st_* function calls */
div[data-testid="stBidiComponentRegular"] > * {
    margin: 0 auto;
}
.stHtml > * {
    margin: 0 auto;
}

/* Removes gaps between blocks in a st_book */
.stVerticalBlock {
    gap: 0;
}

/* Link colours — mirrored in constants.py (single source of truth) */
:root {
    --stx-link-color: #1155cc;
    --stx-link-active-color: #1155cc;
}
@media (prefers-color-scheme: dark) {
    :root {
        --stx-link-color: #3E9DF3;
        --stx-link-active-color: #42D0F3;
    }
}
a {
    color: var(--stx-link-color);
}

/* --- Responsive sizing variables --- */
/* Desktop defaults (used as fallback values in var() too) */
:root {
    /* Font sizes (pt scale) */
    --stx-GIANT-size: 196pt;
    --stx-Giant-size: 128pt;
    --stx-giant-size: 112pt;
    --stx-Huge-size: 96pt;
    --stx-huge-size: 80pt;
    --stx-LARGE-size: 64pt;
    --stx-Large-size: 48pt;
    --stx-large-size: 32pt;
    --stx-big-size: 24pt;
    --stx-medium-size: 16pt;
    --stx-little-size: 12pt;
    --stx-small-size: 8pt;
    --stx-tiny-size: 4pt;

    /* Paddings (pt scale) */
    --stx-Giant-padding: 96pt;
    --stx-giant-padding: 84pt;
    --stx-Huge-padding: 72pt;
    --stx-huge-padding: 60pt;
    --stx-LARGE-padding: 48pt;
    --stx-Large-padding: 36pt;
    --stx-large-padding: 24pt;
    --stx-big-padding: 18pt;
    --stx-medium-padding: 12pt;
    --stx-little-padding: 9pt;
    --stx-small-padding: 6pt;
    --stx-tiny-padding: 3pt;

    /* Margins (pt scale) */
    --stx-Giant-margin: 96pt;
    --stx-giant-margin: 84pt;
    --stx-Huge-margin: 72pt;
    --stx-huge-margin: 60pt;
    --stx-LARGE-margin: 48pt;
    --stx-Large-margin: 36pt;
    --stx-large-margin: 24pt;
    --stx-big-margin: 18pt;
    --stx-medium-margin: 12pt;
    --stx-little-margin: 9pt;
    --stx-small-margin: 6pt;
    --stx-tiny-margin: 3pt;

    /* Grid gaps */
    --stx-gap-48: 48px;
    --stx-gap-32: 32px;
    --stx-gap-24: 24px;
    --stx-gap-16: 16px;
    --stx-gap-12: 12px;
    --stx-gap-8: 8px;

    /* Page padding */
    --stx-page-padding: 36pt;

    /* Code block font size */
    --stx-code-size: 18pt;
}

/* Tablet breakpoint (≤1024px) */
@media (max-width: 1024px) {
    :root {
        /* Font sizes — ~65-85% of desktop for large, unchanged for small */
        --stx-GIANT-size: 128pt;
        --stx-Giant-size: 84pt;
        --stx-giant-size: 74pt;
        --stx-Huge-size: 64pt;
        --stx-huge-size: 54pt;
        --stx-LARGE-size: 48pt;
        --stx-Large-size: 36pt;
        --stx-large-size: 26pt;
        --stx-big-size: 20pt;
        --stx-medium-size: 15pt;
        --stx-little-size: 12pt;
        --stx-small-size: 8pt;
        --stx-tiny-size: 4pt;

        /* Paddings */
        --stx-Giant-padding: 64pt;
        --stx-giant-padding: 56pt;
        --stx-Huge-padding: 48pt;
        --stx-huge-padding: 40pt;
        --stx-LARGE-padding: 32pt;
        --stx-Large-padding: 24pt;
        --stx-large-padding: 18pt;
        --stx-big-padding: 14pt;
        --stx-medium-padding: 10pt;
        --stx-little-padding: 8pt;
        --stx-small-padding: 6pt;
        --stx-tiny-padding: 3pt;

        /* Margins */
        --stx-Giant-margin: 64pt;
        --stx-giant-margin: 56pt;
        --stx-Huge-margin: 48pt;
        --stx-huge-margin: 40pt;
        --stx-LARGE-margin: 32pt;
        --stx-Large-margin: 24pt;
        --stx-large-margin: 18pt;
        --stx-big-margin: 14pt;
        --stx-medium-margin: 10pt;
        --stx-little-margin: 8pt;
        --stx-small-margin: 6pt;
        --stx-tiny-margin: 3pt;

        /* Grid gaps */
        --stx-gap-48: 32px;
        --stx-gap-32: 24px;
        --stx-gap-24: 16px;
        --stx-gap-16: 12px;
        --stx-gap-12: 10px;
        --stx-gap-8: 6px;

        /* Page padding */
        --stx-page-padding: 24pt;

        /* Code block font size */
        --stx-code-size: 14pt;
    }
}

/* Mobile breakpoint (≤480px) */
@media (max-width: 480px) {
    :root {
        /* Font sizes — ~44-88% of desktop for large, unchanged for small */
        --stx-GIANT-size: 80pt;
        --stx-Giant-size: 56pt;
        --stx-giant-size: 48pt;
        --stx-Huge-size: 42pt;
        --stx-huge-size: 36pt;
        --stx-LARGE-size: 32pt;
        --stx-Large-size: 26pt;
        --stx-large-size: 20pt;
        --stx-big-size: 17pt;
        --stx-medium-size: 14pt;
        --stx-little-size: 11pt;
        --stx-small-size: 7pt;
        --stx-tiny-size: 4pt;

        /* Paddings */
        --stx-Giant-padding: 42pt;
        --stx-giant-padding: 36pt;
        --stx-Huge-padding: 32pt;
        --stx-huge-padding: 26pt;
        --stx-LARGE-padding: 22pt;
        --stx-Large-padding: 16pt;
        --stx-large-padding: 12pt;
        --stx-big-padding: 10pt;
        --stx-medium-padding: 8pt;
        --stx-little-padding: 7pt;
        --stx-small-padding: 5pt;
        --stx-tiny-padding: 3pt;

        /* Margins */
        --stx-Giant-margin: 42pt;
        --stx-giant-margin: 36pt;
        --stx-Huge-margin: 32pt;
        --stx-huge-margin: 26pt;
        --stx-LARGE-margin: 22pt;
        --stx-Large-margin: 16pt;
        --stx-large-margin: 12pt;
        --stx-big-margin: 10pt;
        --stx-medium-margin: 8pt;
        --stx-little-margin: 7pt;
        --stx-small-margin: 5pt;
        --stx-tiny-margin: 3pt;

        /* Grid gaps */
        --stx-gap-48: 24px;
        --stx-gap-32: 16px;
        --stx-gap-24: 12px;
        --stx-gap-16: 8px;
        --stx-gap-12: 8px;
        --stx-gap-8: 4px;

        /* Page padding */
        --stx-page-padding: 12pt;

        /* Code block font size */
        --stx-code-size: 11pt;
    }
}

/* --- Export widget styles --- */

.stx-table {
    border-collapse: collapse;
    width: 100%;
    margin: 0.5em 0;
    font-size: 0.9em;
}
.stx-table th {
    background: #f0f2f6;
    font-weight: 600;
    text-align: left;
    padding: 8px 12px;
    border-bottom: 2px solid #ddd;
}
.stx-table td {
    padding: 6px 12px;
    border-bottom: 1px solid #eee;
}

.stx-metric {
    display: inline-block;
    padding: 12px 16px;
    margin: 4px 0;
}
.stx-metric-label {
    font-size: 0.85em;
    color: #808495;
}
.stx-metric-value {
    font-size: 1.8em;
    font-weight: 700;
}
.stx-metric-delta {
    font-size: 0.85em;
    margin-top: 2px;
}

.stx-json {
    background: #f0f2f6;
    padding: 12px 16px;
    border-radius: 4px;
    font-family: monospace;
    font-size: 0.85em;
    overflow-x: auto;
    white-space: pre-wrap;
    margin: 0.5em 0;
}

.stx-chart {
    text-align: center;
    margin: 0.5em 0;
}
.stx-chart svg {
    max-width: 100%;
    height: auto;
}

.stx-graphviz {
    text-align: center;
    margin: 0.5em 0;
}
.stx-graphviz svg {
    max-width: 100%;
    height: auto;
}

.stx-tikz {
    text-align: center;
    margin: 0.5em 0;
}
.stx-tikz svg {
    max-width: 100%;
    height: auto;
}

.stx-media {
    display: block;
    max-width: 100%;
    margin: 0.5em 0;
}
.stx-media iframe {
    max-width: 100%;
}

