/*
 * base.css
 *
 * Theme-agnostic structural rules for MkDocs Material + Ask AI Drawer.
 * Loaded before every theme preset (see themes/*.css) — contains no colors,
 * only layout mechanics that every theme should share. Palette, fonts, and
 * component skinning live in the selected themes/<name>.css file instead.
 */

/* ── Sidebar viewport sizing fix ──────────────────────────────────────────── */
:root {
    --gnus-sidebar-width: 16rem;
    --gnus-header-height: 2.4rem;         /* fallback, overridden by theme presets */
    --gnus-header-border-width: 0px;      /* overridden by themes that add a border */
}

.md-main__inner {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

@media screen and (min-width: 76.25em) {
    html, body {
        overflow: hidden;
    }

    .md-container {
        display: grid;
        grid-template-rows: minmax(0, 1fr) auto;
        height: calc(100vh - var(--gnus-header-height) - var(--gnus-header-border-width));
        overflow: hidden;
    }

    .md-main {
        min-height: 0;
        overflow: hidden;
    }

    .md-main__inner {
        height: 100%;
        min-height: 0;
        margin-top: 0;
        padding-top: 1.5rem;
        box-sizing: border-box;
        overflow: hidden;
    }

    .md-sidebar--primary,
    .md-sidebar--primary .md-sidebar__scrollwrap,
    .md-content {
        height: 100% !important;
        max-height: 100% !important;
        min-height: 0;
    }

    .md-content {
        overflow-y: auto;
        overflow-x: hidden;
        overscroll-behavior: contain;
    }

    .md-main__inner > .md-sidebar--primary {
        flex: 0 0 var(--gnus-sidebar-width) !important;
    }

    .md-sidebar--primary {
        position: relative !important;
        width: var(--gnus-sidebar-width) !important;
        min-width: var(--gnus-sidebar-width) !important;
        max-width: var(--gnus-sidebar-width) !important;
    }
}

@media screen and (max-width: 76.234375em) {
    /* Keep the root drawer nav list expanded to intrinsic height on mobile. */
    .md-sidebar--primary .md-nav--primary > .md-nav__list {
        height: auto !important;
        max-height: none !important;
    }

    /* Material sets overflow:hidden on the scrollwrap for drill-down nav,
       but with navigation.sections enabled all sections are expanded.
       Allow scrolling so items below the viewport aren't clipped. */
    .md-sidebar--primary .md-sidebar__scrollwrap {
        overflow-y: auto !important;
    }
}

.md-main__inner > .md-content,
.md-main__inner > .md-grid {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    margin-left: 10px !important;
}

.md-main__inner > .md-content > .md-content__inner,
.md-main__inner > .md-grid,
.md-main__inner .md-grid {
    margin-left: 20px !important;
    margin-right: 20px !important;
    max-width: none !important;
}

@media screen and (min-width: 76.25em) {
    .md-sidebar--primary,
    .md-sidebar--primary .md-sidebar__scrollwrap,
    .md-sidebar--primary .md-sidebar__inner {
        min-height: 0;
    }

    .md-sidebar--primary {
        padding-top: 0 !important;
        padding-bottom: 4rem !important;
        overflow: hidden !important;
        overscroll-behavior: contain !important;
    }

    .md-sidebar--primary .md-sidebar__scrollwrap {
        width: calc(100% - 0.5rem) !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        overscroll-behavior: contain !important;
    }

    .md-sidebar--primary .md-sidebar__inner {
        width: 100%;
        padding: 0 0.2rem !important;
        box-sizing: border-box;
        overflow: visible;
    }

    .md-sidebar--primary .md-nav--primary,
    .md-sidebar--primary .md-nav--integrated,
    .md-sidebar--primary .md-nav.md-nav--primary,
    .md-sidebar--primary .md-nav.md-nav--integrated {
        width: 100% !important;
        max-width: none !important;
        box-sizing: border-box !important;
    }

    .gnus-sidebar-resizer {
        position: absolute;
        top: 0;
        right: -0.25rem;
        width: 0.5rem;
        height: 100%;
        cursor: col-resize;
        z-index: 20;
    }

    body.gnus-sidebar-resizing,
    body.gnus-sidebar-resizing * {
        cursor: col-resize !important;
        user-select: none !important;
    }
}

/* ── Suppress duplicate nav title labels (desktop only) ─────────────────────
   On desktop all sections are visible so the back-navigation label inside
   each nested <nav> duplicates the parent link.  On mobile the same label
   IS the back button — without it you can't leave a drill-down level. */
@media screen and (min-width: 76.25em) {
    .md-nav__item--nested > .md-nav > .md-nav__title {
        display: none;
    }
}

/* ── Fix nav container double-padding ────────────────────────────────────────
   When a nav item has both a link and children (navigation.indexes enabled),
   Material wraps the link + toggle icon in a .md-nav__container div that also
   carries the .md-nav__link class.  Theme padding on both the container and
   the inner <a> stacks, pushing the text slightly right of its siblings. */
.md-nav__container > .md-nav__link {
    padding: 0;
}

/* ── GitBook image / figure alignment ─────────────────────────────────────── */
.md-typeset figure                        { display:block; margin:1rem auto; text-align:center; }
.md-typeset figure img                    { display:inline-block; }

.md-typeset div[align="left"]             { text-align:left; }
.md-typeset div[align="left"] figure,
.md-typeset div[align="left"] img         { display:inline-block; margin:0; }

.md-typeset div[align="center"]           { text-align:center; }

.md-typeset div[data-full-width="true"]   { width:100%; text-align:left; }
.md-typeset div[data-full-width="true"] figure { display:block; width:100%; margin:1rem 0; }
.md-typeset div[data-full-width="true"] img:not([width]) { width:100%; max-width:100%; display:block; }

/* ── Content bottom margin ───────────────────────────────────────────────── */
.md-content__inner { padding-bottom: 4rem; }

/* ── Mobile width containment ──────────────────────────────────────────────
   Material's desktop-oriented width and margin rules must not create a
   horizontal layout viewport on phones. Long product identifiers and wide
   Markdown elements should wrap or scroll inside the content column. */
@media screen and (max-width: 48em) {
    html,
    body,
    .md-container,
    .md-main,
    .md-main__inner,
    .md-content,
    .md-content__inner,
    .md-typeset {
        min-width: 0 !important;
        max-width: 100% !important;
        box-sizing: border-box;
    }

    html,
    body {
        overflow-x: hidden;
        overflow-x: clip;
    }

    .md-main__inner {
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .md-main__inner > .md-content {
        width: auto !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .md-main__inner > .md-content > .md-content__inner {
        width: auto !important;
        margin-left: 1rem !important;
        margin-right: 1rem !important;
    }

    .md-typeset h1,
    .md-typeset h2,
    .md-typeset h3,
    .md-typeset h4,
    .md-typeset h5,
    .md-typeset h6 {
        max-width: 100%;
        overflow-wrap: anywhere;
        word-break: normal;
    }

    .md-typeset img,
    .md-typeset video,
    .md-typeset iframe {
        max-width: 100%;
        height: auto;
    }

    .md-typeset pre,
    .md-typeset table {
        max-width: 100%;
        overflow-x: auto;
    }

    /* iOS zooms the visual viewport when a focused form control renders below
       16px. The Ask input is protected inside its Shadow DOM; this covers the
       normal document and MkDocs Material search UI without disabling pinch
       zoom in the viewport meta tag. */
    input,
    textarea,
    select,
    .md-search__input {
        font-size: 16px !important;
    }
}

/* ── Ask AI Drawer default variables ───────────────────────────────────────
   Themes override these in themes/<name>.css.  The widget's shadow DOM
   inherits custom properties from :root automatically. */
:root {
  --ask-accent: #2f6fed;
  --ask-on-accent: #fff;
  --ask-icon: ✨;
  --ask-font: system-ui, -apple-system, "Segoe UI", sans-serif;
  --ask-drawer-bg: #fff;
  --ask-drawer-fg: #16232e;
  --ask-drawer-border: #d6dde3;
  --ask-msg-bg: #f1f4f7;
  --ask-msg-border: #e2e8ee;
  --ask-code-bg: #e6ebf1;
  --ask-input-bg: #fff;
  --ask-input-border: #d6dde3;
  --ask-thinking-bg: #f4f6f8;
  --ask-session-bg: #f8f9fb;
  --ask-session-border: #e2e8ee;
  --ask-session-item-border: #eef1f5;
  --ask-session-active: #e8ecf1;
  --ask-session-hover: #eef1f5;
  --ask-muted-fg: #6b7b8b;
  --ask-danger: #cc6666;

  --ask-dark-bg: #1a2129;
  --ask-dark-fg: #dbe4ec;
  --ask-dark-border: #2c3944;
  --ask-dark-msg-bg: #232d38;
  --ask-dark-session-bg: #19212b;
  --ask-dark-session-item-border: #1e2732;
  --ask-dark-muted-fg: #8fa1b0;
  --ask-dark-thinking-fg: #a0b0c0;
  --ask-dark-link: #6fa8f0;
}