@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700&display=swap');

html {
    scroll-behavior: smooth;
    scroll-padding-top: 90px;
}

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* Improved text readability */
p {
    line-height: 1.6;
    margin-bottom: 1rem;
}

/* Better heading spacing */
h1, h2, h3, h4, h5, h6 {
    margin-top: 1.5em;
    margin-bottom: 0.5em;
    line-height: 1.3;
}

h1:first-child,
h2:first-child,
h3:first-child {
    margin-top: 0;
}

/* Link styling */
a {
    transition: all 0.2s ease;
}

/* Better list spacing */
ul, ol {
    margin-bottom: 1rem;
    padding-left: 1.5rem;
}

li {
    margin-bottom: 0.5rem;
}

/* Blockquote styling */
blockquote {
    border-left: 4px solid var(--mantine-color-teal-5);
    padding-left: 1rem;
    margin-left: 0;
    margin-right: 0;
    font-style: italic;
    color: var(--mantine-color-dimmed);
}

input:invalid {
    outline: none !important;
}

#wrapper {
    padding: 10px;
    margin-left: 320px;
    margin-right: 320px;
}

:root[data-mantine-color-scheme="dark"] #dark-theme-icon {
    display: none;
}

:root[data-mantine-color-scheme="light"] #light-theme-icon {
    display: none;
}

.demo-container {
    display: flex;
    max-width: 100%;
    overflow: hidden;
}

.demo-preview {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 20px;
    justify-content: center;
}

.demo-controls {
    width: 250px;
    padding: 20px;
    gap: 10px;
}

.demo-control {
    margin: 10px;
}

@media only screen and (max-width: 750px) {
    .demo-container {
        flex-direction: column;
    }

    .demo-controls {
        width: 100%;
    }
}

.dmc-bar {
    background-image: linear-gradient(to right, yellow, orange);
}

.dmc-thumb {
    border-color: orange;
    height: 20px;
    width: 20px;
    background-color: white;
}

.mantine-Table-th {
    font-size: 15px;
    font-weight: 500;
}

.dmc-indicator {
  width: 12px;
  height: 4px;
  transition: width 250ms ease;

  &[data-active] {
    width: 40px;
  }
}

.dmc-control {
  &[data-inactive] {
    opacity: 0;
    cursor: default;
  }
}

.dmc-controls {
  transition: opacity 150ms ease;
  opacity: 0;
}

.dmc-root {
  &:hover {
    .dmc-controls {
      opacity: 1;
    }
  }
}



.dmc-slider-track {
  &::before {
    background-color: light-dark(var(--mantine-color-blue-1), var(--mantine-color-dark-3));
  }
}

.dmc-slider-mark {
  width: 6px;
  height: 6px;
  border-radius: 6px;
  transform: translateX(-3px) translateY(-2px);
  border-color: light-dark(var(--mantine-color-blue-1), var(--mantine-color-dark-3));

  &[data-filled] {
    border-color: var(--mantine-color-blue-6);
  }
}

.dmc-slider-markLabel {
  font-size: var(--mantine-font-size-sm);
  color: var(--mantine-color-green-5);
  margin-bottom: 5px;
  margin-top: 0;
}

.dmc-slider-thumb {
  height: 16px;
  width: 16px;
  background-color: var(--mantine-color-green-5);
  border-width: 1px;
  box-shadow: var(--mantine-shadow-lg);
}

.navbar-link {
    padding: 0.5rem 1rem;
    border-radius: 0.25rem;
    transition: background 0.1s;
    color: inherit;
    display: inline-flex;
    gap: 0.5rem;

    &:hover {
        text-decoration: none;
        background: color-mix(in srgb, var(--mantine-color-gray-5), transparent 90%);
    }
}

/* REMOVED (2026-08-21): a `.m_b8a05bbd { margin-top: 80px !important;
   height: 63vh !important }` rule lived here — a Mantine INTERNAL hashed
   class (the Drawer content) pinned to fake the old floating-card drawer.
   With !important it silently overrode the network-standard full-height
   drawer's inline docking styles, which is why this host's burger kept
   floating after the port. Never target `.m_*` hashes for layout: they are
   private, version-unstable, and they beat inline styles when marked
   !important. Style the drawer through its component props instead. */

div .m_46b77525 {
    margin-top: calc(0.5rem* var(--mantine-scale)) !important;
}

.m_5caae85b {
    position: absolute !important;
    top: calc(0.3125rem* var(--mantine-scale));
    inset-inline-end: calc(0.3125rem* var(--mantine-scale));
    z-index: 1;
}

.m_9cdde9a {
    inset-inline-end: 0;
    width: var(--app-shell-aside-width);
    transform: var(--app-shell-aside-transform);
    z-index: var(--app-shell-aside-z-index);
    margin-top: 15px;
}

:root[data-mantine-color-scheme="dark"] {
    --mantine-color-anchor: #74c0fc !important;
    --mantine-color-dark-light: rgba(63, 63, 70, 0.15);
    --mantine-color-dark-light-hover: rgba(63, 63, 70, 0.2);
    --mantine-color-dark-outline-hover: rgba(113, 113, 122, 0.05);
}

img[alt=logo] { width: 100%; }

/* Theme-aware code blocks */
:root[data-mantine-color-scheme="light"] pre,
:root[data-mantine-color-scheme="light"] code {
    background-color: #f8f9fa;
    color: #1a1b1e;
}

:root[data-mantine-color-scheme="dark"] pre,
:root[data-mantine-color-scheme="dark"] code {
    background-color: #1a1b1e;
    color: #c1c2c5;
}

/* Inline code */
:root[data-mantine-color-scheme="light"] code {
    background-color: #f1f3f5;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.9em;
}

:root[data-mantine-color-scheme="dark"] code {
    background-color: #25262b;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.9em;
}

/* Code blocks */
:root[data-mantine-color-scheme="light"] pre {
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 16px;
    overflow-x: auto;
}

:root[data-mantine-color-scheme="dark"] pre {
    background-color: #1a1b1e;
    border: 1px solid #373a40;
    border-radius: 8px;
    padding: 16px;
    overflow-x: auto;
}

/* Code inside pre blocks */
:root[data-mantine-color-scheme="light"] pre code {
    background-color: transparent;
    padding: 0;
    color: #1a1b1e;
}

:root[data-mantine-color-scheme="dark"] pre code {
    background-color: transparent;
    padding: 0;
    color: #c1c2c5;
}

/* Sun icon rotation animations - direction based on scroll */
@keyframes rotate-sun-clockwise {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

@keyframes rotate-sun-counter-clockwise {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(-360deg);
    }
}

/* Clockwise rotation (scroll down) */
#light-theme-icon.rotating-down,
#light-theme-icon.rotating-down svg,
#light-theme-icon.rotating-down iconify-icon {
    animation: rotate-sun-clockwise 1.2s ease-out infinite;
    display: inline-block;
}

/* Counter-clockwise rotation (scroll up) */
#light-theme-icon.rotating-up,
#light-theme-icon.rotating-up svg,
#light-theme-icon.rotating-up iconify-icon {
    animation: rotate-sun-counter-clockwise 1.2s ease-out infinite;
    display: inline-block;
}

/* Smooth transition when stopping */
#light-theme-icon,
#light-theme-icon svg,
#light-theme-icon iconify-icon {
    transition: transform 0.3s ease-out;
    display: inline-block;
}

/* Typewriter cursor animation for Dash Docs title */
@keyframes blink-cursor {
    0%, 49% {
        opacity: 1;
    }
    50%, 100% {
        opacity: 0;
    }
}

/* Blinking cursor while the typewriter is running.
   Color tracks the dash-leaflet2 green brand (matches the title text). */
#dash-docs-title.typing::after {
    content: '▋';
    animation: blink-cursor 1s step-end infinite;
    margin-left: 2px;
    color: var(--mantine-color-green-6);
}

/* AG Grid Dark Mode Support */
/* Override AG Grid theme colors for dark mode */
:root[data-mantine-color-scheme="dark"] .ag-theme-alpine {
    /* Core background colors */
    --ag-background-color: #1a1b1e;
    --ag-foreground-color: #c1c2c5;
    --ag-border-color: #373a40;
    --ag-secondary-border-color: #2c2e33;

    /* Header colors */
    --ag-header-background-color: #25262b;
    --ag-header-foreground-color: #c1c2c5;

    /* Row colors */
    --ag-odd-row-background-color: #1a1b1e;
    --ag-row-hover-color: #25262b;
    --ag-selected-row-background-color: #373a40;

    /* Control panel (filters, pagination) */
    --ag-control-panel-background-color: #25262b;

    /* Input colors */
    --ag-input-border-color: #373a40;
    --ag-input-disabled-border-color: #2c2e33;
    --ag-input-disabled-background-color: #25262b;

    /* Pagination and widgets */
    --ag-disabled-foreground-color: #5c5f66;
    --ag-chip-background-color: #373a40;

    /* Hover and focus states */
    --ag-row-border-color: #2c2e33;
    --ag-cell-horizontal-border: solid #2c2e33;

    /* Filter colors */
    --ag-input-focus-border-color: #5c5f66;

    /* Icons */
    color-scheme: dark;
}

/* Light mode adjustments (ensure proper contrast) */
:root[data-mantine-color-scheme="light"] .ag-theme-alpine {
    --ag-background-color: #ffffff;
    --ag-foreground-color: #1a1b1e;
    --ag-border-color: #dee2e6;
    --ag-header-background-color: #f8f9fa;
    --ag-row-hover-color: #f1f3f5;
}

/* Custom AG Grid Cell Styling - Light Mode */
:root[data-mantine-color-scheme="light"] .ag-theme-alpine .timestamp-cell {
    font-family: monospace;
    font-size: 14px;
}

:root[data-mantine-color-scheme="light"] .ag-theme-alpine .bot-type-cell {
    font-weight: 500;
    padding: 4px 8px;
    border-radius: 4px;
}

:root[data-mantine-color-scheme="light"] .ag-theme-alpine .bot-training {
    background-color: #ffe0e0;
    color: #c92a2a;
}

:root[data-mantine-color-scheme="light"] .ag-theme-alpine .bot-search {
    background-color: #d0ebff;
    color: #1971c2;
}

:root[data-mantine-color-scheme="light"] .ag-theme-alpine .bot-traditional {
    background-color: #d3f9d8;
    color: #2f9e44;
}

:root[data-mantine-color-scheme="light"] .ag-theme-alpine .bot-unknown {
    background-color: #f1f3f5;
    color: #868e96;
    font-weight: 400;
}

:root[data-mantine-color-scheme="light"] .ag-theme-alpine .page-cell {
    font-family: monospace;
    font-size: 12px;
    background-color: #f8f9fa;
    padding: 4px 6px;
    border-radius: 4px;
}

:root[data-mantine-color-scheme="light"] .ag-theme-alpine .user-agent-cell {
    font-size: 12px;
    color: #868e96;
}

/* Custom AG Grid Cell Styling - Dark Mode */
:root[data-mantine-color-scheme="dark"] .ag-theme-alpine .timestamp-cell {
    font-family: monospace;
    font-size: 14px;
}

:root[data-mantine-color-scheme="dark"] .ag-theme-alpine .bot-type-cell {
    font-weight: 500;
    padding: 4px 8px;
    border-radius: 4px;
}

:root[data-mantine-color-scheme="dark"] .ag-theme-alpine .bot-training {
    background-color: #5c1414;
    color: #ffa8a8;
}

:root[data-mantine-color-scheme="dark"] .ag-theme-alpine .bot-search {
    background-color: #1c3d5a;
    color: #74c0fc;
}

:root[data-mantine-color-scheme="dark"] .ag-theme-alpine .bot-traditional {
    background-color: #1b4332;
    color: #8ce99a;
}

:root[data-mantine-color-scheme="dark"] .ag-theme-alpine .bot-unknown {
    background-color: #373a40;
    color: #909296;
    font-weight: 400;
}

:root[data-mantine-color-scheme="dark"] .ag-theme-alpine .page-cell {
    font-family: monospace;
    font-size: 12px;
    background-color: #25262b;
    padding: 4px 6px;
    border-radius: 4px;
}

:root[data-mantine-color-scheme="dark"] .ag-theme-alpine .user-agent-cell {
    font-size: 12px;
    color: #909296;
}
/* ---------------------------------------------------------------------------
 * Clerk avatar dropdown vs. the Table of Contents aside
 * ---------------------------------------------------------------------------
 * Measured on the deployed site:
 *
 *     header  z-index 100   position: fixed
 *     aside   z-index 101   (Mantine sets --app-shell-aside-z-index to
 *                            calc(100 + 1) — deliberately ABOVE the header)
 *     navbar  z-index 101
 *     #clerk-menu-dropdown  z-index 10000, position: absolute
 *
 * The dropdown's 10000 is worthless here. `position: fixed` + `z-index: 100`
 * makes the header a STACKING CONTEXT, so 10000 only orders the dropdown among
 * the header's own descendants — the header as a whole still paints below the
 * aside. document.elementFromPoint() at the dropdown's centre returned the
 * TOC's Stack, i.e. the menu was not merely hidden but unclickable.
 *
 * Raising the dropdown cannot fix that; the header has to clear the aside.
 * 150 leaves the 102-199 band free and stays under the overlay/notification
 * layers already in use (200 and 400).
 *
 * !important because DMC injects its own stylesheet and load order relative to
 * assets/*.css is not guaranteed — the same reason assets/style.css does it.
 * ------------------------------------------------------------------------ */
header.mantine-AppShell-header {
    z-index: 150 !important;
}

/* ==========================================================================
   Mobile fit (template 1.6.39) — nothing may push the document past the
   viewport. Every rule here is stylesheet-only and uses PUBLIC Mantine class
   names; never the hashed .m_* internals, which are version-coupled by
   construction (a rule that stops matching after a bump fails silently).
   ========================================================================== */

/* Wide tables scroll in their own box. `.. kwargs::` prop tables — which this
   site has on every component page — carry m2d-block-kwargs, NOT m2d-table,
   so they need naming explicitly or they are the one table that never
   matched. Element+class so it outranks Mantine's own width rule whatever
   the load order. */
table.m2d-table,
table.m2d-block-kwargs {
    display: block;
    width: max-content;
    max-width: 100%;
    overflow-x: auto;
}

/* Code blocks scroll inside their own box wherever they sit. CodeHighlight's
   <pre> already scrolls, but a flex parent with the default min-width:auto —
   a Mantine List item wrapper, a Blockquote, a Stack — refuses to shrink
   below the code's intrinsic width and drags the whole document wide. */
.mantine-List-itemWrapper,
.mantine-List-itemLabel,
.mantine-List-item,
.mantine-Blockquote-root,
.mantine-Timeline-itemBody,
.mantine-CodeHighlight-root,
.mantine-CodeHighlightTabs-root {
    min-width: 0;
    max-width: 100%;
}

/* The wrapper is inline-flex and the label a block child: without min-width:0
   on the LABEL too, it grows to the code's width. */
.mantine-List-itemWrapper {
    width: 100%;
}

.mantine-List-itemLabel {
    flex: 1 1 auto;
}

/* Timeline bullets (/changelog): a Text in a no-wrap Group grows to its
   longest unbreakable token and leaves its card. */
.mantine-Timeline-root .mantine-Text-root,
.mantine-Timeline-root .mantine-Code-root {
    min-width: 0;
    overflow-wrap: anywhere;
}

/* Inline code in prose: a long unbreakable token (a dotted module path, a
   `new TileLayer(...)` chain) is the last thing that can push a page past the
   viewport once blocks and tables scroll in their own boxes. Block code keeps
   its pre formatting — this is inline only. */
code.m2d-codespan,
.mantine-Code-root:not(.mantine-CodeHighlight-code) {
    overflow-wrap: anywhere;
    white-space: normal;
}

.mantine-CodeHighlight-root pre,
.mantine-CodeHighlightTabs-root pre,
.mantine-AppShell-main pre {
    overflow-x: auto;
    max-width: 100%;
}

/* The skip link (template 1.6.41): the first tab stop on every page, jumping
   past the sidebar's ~30 stops straight to the content. Moved off-screen with
   `left` rather than display/visibility — a control removed from the tree
   cannot be focused back into view, and one hidden with opacity alone is
   still announced where it sits. `:focus` brings it back. */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 9999;
    background: var(--mantine-primary-color-filled);
    color: var(--mantine-color-white);
    padding: 8px 14px;
    border-radius: 0 0 8px 0;
    font-weight: 600;
    text-decoration: none;
}
.skip-link:focus {
    left: 0;
}

/* ==========================================================================
   a11y — 1.6.44 item 6 (b) and (c)
   ========================================================================== */

/* (b) Prose links do not rely on colour alone.
   The global Anchor default is `underline: "hover"` (components/appshell.py),
   which is right for CHROME — nav rows, footer icons, cards — where position
   and shape already say "control". Inside running prose it is the failure
   WCAG 1.4.1 names: a link in a paragraph differs from the text around it by
   hue only, so a reader who cannot separate those hues cannot find it.

   SCOPED to #main-content (the skip link's target, i.e. the page body) — the
   spec's own warning is that an unscoped rule repaints the chrome, and this
   site's chrome is made of anchors: the header wordmark, the app menu, every
   footer icon and all 27 navbar rows. */
#main-content p a,
#main-content li a,
#main-content td a,
#main-content blockquote a {
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

/* Never underline a link that is a wrapper around an icon, a card or a
   rendered map — the underline would be a stray rule under an image. This
   repo has more of these than the template does: every example page wraps
   demo output in anchors. */
#main-content a:has(> img),
#main-content a:has(> .m2d-admonition),
#main-content a.no-underline {
    text-decoration: none;
}

/* (c) Touch targets at phone width.
   The iOS/Android minimum is 44x44. The mobile drawer's rows already meet it;
   the icon controls did not — a Mantine ActionIcon size="lg" is 34px, and
   this site's header and footer are made of them (three in the header, one
   per social link in the footer). Widened only at phone width so the desktop
   chrome keeps its density. */
@media only screen and (max-width: 750px) {
    .mantine-AppShell-header .mantine-ActionIcon-root,
    .mantine-AppShell-footer .mantine-ActionIcon-root,
    .mantine-AppShell-header .mantine-Burger-root {
        min-width: 44px;
        min-height: 44px;
    }
}