/* Prevent scrollbar width jump when modals open */
html {
    scrollbar-gutter: stable;
}

:root {
  /* Core surfaces */
  --color-background: #f6f9ff;
  --color-surface: #f6f9ff;
  --color-surface-bright: #f6f9ff;
  --color-surface-dim: #d4dbe3;
  --color-surface-container-lowest: #ffffff;
  --color-surface-container-low: #eef4fd;
  --color-surface-container: #e8eef7;
  --color-surface-container-high: #e2e9f1;
  --color-surface-container-highest: #dce3ec;
  --color-surface-variant: #dce3ec;
  --color-surface-tint: #2858c0;

  /* Primary */
  --color-primary: #003080;
  --color-primary-container: #0645ad;
  --color-on-primary: #ffffff;
  --color-on-primary-container: #a5bcff;
  --color-primary-fixed: #dae2ff;
  --color-primary-fixed-dim: #b2c5ff;
  --color-on-primary-fixed: #001849;
  --color-on-primary-fixed-variant: #003fa3;
  --color-inverse-primary: #b2c5ff;

  /* Secondary */
  --color-secondary: #2259bf;
  --color-secondary-container: #6795fe;
  --color-on-secondary: #ffffff;
  --color-on-secondary-container: #002d71;
  --color-secondary-fixed: #d9e2ff;
  --color-secondary-fixed-dim: #b1c5ff;
  --color-on-secondary-fixed: #001946;
  --color-on-secondary-fixed-variant: #00419d;

  /* Tertiary */
  --color-tertiary: #641e00;
  --color-tertiary-container: #8a2d00;
  --color-on-tertiary: #ffffff;
  --color-on-tertiary-container: #ffa887;
  --color-tertiary-fixed: #ffdbcf;
  --color-tertiary-fixed-dim: #ffb59a;
  --color-on-tertiary-fixed: #380d00;
  --color-on-tertiary-fixed-variant: #802900;

  /* Error */
  --color-error: #ba1a1a;
  --color-error-container: #ffdad6;
  --color-on-error: #ffffff;
  --color-on-error-container: #93000a;

  /* Text / content */
  --color-on-surface: #151c22;
  --color-on-surface-variant: #434653;
  --color-on-background: #151c22;
  --color-inverse-surface: #2a3138;
  --color-inverse-on-surface: #ebf1fa;

  /* Outlines */
  --color-outline: #737684;
  --color-outline-variant: #c3c6d5;

  /* Legacy aliases for custom CSS (infobox, toc, markdown-body) */
  --bg-color: var(--color-background);
  --text-color: var(--color-on-surface);
  --panel-bg: var(--color-surface-container-lowest);
  --panel-border: var(--color-outline-variant);
  --accent-color: #0d8a8a;
  --accent-hover: #0a6b6b;
  --link-color: #0645ad;
  --warning-bg: #fff3cd;
  --warning-text: #856404;
}

.dark {
  /* Core surfaces */
  --color-background: #0f1115;
  --color-surface: #111318;
  --color-surface-bright: #37393e;
  --color-surface-dim: #111318;
  --color-surface-container-lowest: #0c0e13;
  --color-surface-container-low: #191c21;
  --color-surface-container: #1d2025;
  --color-surface-container-high: #282a30;
  --color-surface-container-highest: #33353b;
  --color-surface-variant: #43474e;
  --color-surface-tint: #a8c8ff;

  /* Primary */
  --color-primary: #a8c8ff;
  --color-primary-container: #004a99;
  --color-on-primary: #003080;
  --color-on-primary-container: #c2daff;
  --color-primary-fixed: #dae2ff;
  --color-primary-fixed-dim: #b2c5ff;
  --color-on-primary-fixed: #001849;
  --color-on-primary-fixed-variant: #004699;
  --color-inverse-primary: #003080;

  /* Secondary */
  --color-secondary: #adc6ff;
  --color-secondary-container: #3a67bf;
  --color-on-secondary: #002d71;
  --color-on-secondary-container: #d9e2ff;
  --color-secondary-fixed: #d9e2ff;
  --color-secondary-fixed-dim: #b1c5ff;
  --color-on-secondary-fixed: #001946;
  --color-on-secondary-fixed-variant: #1a4ea0;

  /* Tertiary */
  --color-tertiary: #ffb59a;
  --color-tertiary-container: #8a2d00;
  --color-on-tertiary: #5a1500;
  --color-on-tertiary-container: #ffdbcf;
  --color-tertiary-fixed: #ffdbcf;
  --color-tertiary-fixed-dim: #ffb59a;
  --color-on-tertiary-fixed: #380d00;
  --color-on-tertiary-fixed-variant: #802900;

  /* Error */
  --color-error: #ffb4ab;
  --color-error-container: #93000a;
  --color-on-error: #690005;
  --color-on-error-container: #ffdad6;

  /* Text / content */
  --color-on-surface: #e2e3e8;
  --color-on-surface-variant: #c3c6cf;
  --color-on-background: #e2e3e8;
  --color-inverse-surface: #e2e3e8;
  --color-inverse-on-surface: #2f3036;

  /* Outlines */
  --color-outline: #8d9199;
  --color-outline-variant: #43474e;

  /* Legacy aliases */
  --bg-color: var(--color-background);
  --text-color: var(--color-on-surface);
  --panel-bg: var(--color-surface-container);
  --panel-border: var(--color-outline-variant);
  --accent-color: #2dd4bf;
  --accent-hover: #14b8a6;
  --link-color: #60a5fa;
  --warning-bg: #3f3f46;
  --warning-text: #d4d4d8;
}

/* Topology SVG theme adaptation */
.dark .infobox img {
    filter: invert(1) hue-rotate(180deg);
}

/* Encylopedic text link style */
.wiki-link {
    color: var(--link-color);
    text-decoration: none;
}
.wiki-link:hover {
    text-decoration: underline;
}

/* Infobox styling */
.infobox {
    float: right;
    clear: right;
    margin-left: 1rem;
    margin-bottom: 1rem;
    border: 1px solid var(--panel-border);
    background-color: var(--panel-bg);
    width: 300px;
    font-size: 0.9em;
}
.infobox th {
    text-align: left;
    padding: 0.25rem 0.5rem;
    vertical-align: top;
    width: 40%;
}
.infobox td {
    padding: 0.25rem 0.5rem;
}
.infobox .infobox-header {
    background-color: var(--bg-color);
    border-bottom: 1px solid var(--panel-border);
    text-align: center;
    font-weight: bold;
    padding: 0.5rem;
}

/* Wiki Section Header */
.wiki-section-header {
    border-bottom: 1px solid var(--panel-border);
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
    padding-bottom: 0.25rem;
}

/* Table of Contents */
.toc {
    border: 1px solid var(--panel-border);
    background-color: var(--panel-bg);
    display: inline-block;
    padding: 1rem;
    margin-bottom: 1rem;
}

/* Markdown Styles inside Modal */
.markdown-body h1, .markdown-body h2, .markdown-body h3, .markdown-body h4 {
    font-family: 'Lora', serif;
    font-weight: 700;
    margin-top: 1.5em;
    margin-bottom: 0.5em;
    color: var(--text-color);
}
.markdown-body h1 { font-size: 2em; border-bottom: 1px solid var(--panel-border); padding-bottom: 0.3em; }
.markdown-body h2 { font-size: 1.5em; border-bottom: 1px solid var(--panel-border); padding-bottom: 0.3em; }
.markdown-body h3 { font-size: 1.25em; }
.markdown-body p { margin-bottom: 1em; }
.markdown-body ul, .markdown-body ol { margin-bottom: 1em; padding-left: 2em; }
.markdown-body ul { list-style-type: disc; }
.markdown-body ol { list-style-type: decimal; }
.markdown-body blockquote {
    border-left: 4px solid var(--panel-border);
    padding-left: 1em;
    color: var(--text-color);
    opacity: 0.8;
    margin-bottom: 1em;
    background-color: var(--panel-bg);
    padding: 0.5em 1em;
}
.markdown-body pre {
    background-color: var(--panel-bg);
    padding: 1em;
    border-radius: 4px;
    overflow-x: auto;
    margin-bottom: 1em;
    border: 1px solid var(--panel-border);
}
.markdown-body code {
    font-family: monospace;
    background-color: var(--panel-bg);
    padding: 0.2em 0.4em;
    border-radius: 3px;
    font-size: 0.9em;
}
.markdown-body pre code {
    background-color: transparent;
    padding: 0;
}
.markdown-body a {
    color: var(--link-color);
    text-decoration: none;
}
.markdown-body a:hover {
    text-decoration: underline;
}
.markdown-body hr {
    border: 0;
    border-top: 1px solid var(--panel-border);
    margin: 2em 0;
}

/* Gallery */
.dark #gallery-modal img {
    filter: invert(1) hue-rotate(180deg);
}

#gallery-carousel img {
    transition: opacity 0.2s ease;
}

.gallery-grid-thumb {
    aspect-ratio: 1;
    border-radius: 0.5rem;
    overflow: hidden;
    cursor: pointer;
    border: 2px solid transparent;
    transition: border-color 0.2s ease, opacity 0.2s ease;
    opacity: 0.7;
}

.gallery-grid-thumb:hover {
    opacity: 1;
}

.gallery-grid-thumb.active {
    border-color: #fff;
    opacity: 1;
}

.gallery-grid-thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: rgba(255,255,255,0.05);
}

/* Print Styles */
@media print {
    body > :not(#print-area) {
        display: none !important;
    }

    #print-area {
        display: block !important;
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        margin: 0;
        padding: 0;
        background: white;
        color: black;
    }

    .page-break-after {
        page-break-after: always;
        break-after: page;
    }

    /* Ensure markdown body prints cleanly */
    .print-document {
        padding: 2cm;
    }

    .markdown-body h1, .markdown-body h2, .markdown-body h3, .markdown-body p, .markdown-body li {
        color: black !important;
    }
}

/* Smooth theme transitions (applied temporarily during theme toggle) */
html.smooth-theme-transition,
html.smooth-theme-transition *,
html.smooth-theme-transition *::before,
html.smooth-theme-transition *::after {
    transition: background-color 0.3s ease,
                color 0.3s ease,
                border-color 0.3s ease,
                fill 0.3s ease,
                stroke 0.3s ease !important;
}

/* Sonata branding patch
   The HTML originated from a wiki-style template. These rules replace the visible
   inherited template labels without touching the landing page logic, gallery, or
   document viewer scripts. */
#sidebar > div.mb-stack-sm h1,
#sidebar > div.mb-stack-sm p,
header .font-display-xl {
    font-size: 0 !important;
    line-height: 0 !important;
}

#sidebar > div.mb-stack-sm h1::after {
    content: "Sonata AI";
    display: block;
    font-size: 22px;
    line-height: 1.4;
    font-weight: 700;
    color: var(--color-on-surface);
}

#sidebar > div.mb-stack-sm p::after {
    content: "Public Evidence Dossier";
    display: block;
    font-size: 13px;
    line-height: 1.4;
    font-weight: 400;
    color: var(--color-secondary);
}

header .font-display-xl::after {
    content: "Sonata Dossier";
    display: block;
    font-size: 32px;
    line-height: 1.2;
    letter-spacing: -0.01em;
    font-weight: 700;
    color: var(--color-on-surface);
}