.example-container {
    position: relative;
    display: block;
    margin: 20px 0;
    width: 100%;
    padding: 0;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    background-color: #f8f8f8;
    overflow: visible;
}

/* Stacked layout: YAML on top, render below (no overlay) */
.example-container.example-stacked {
    display: block;
}

.example-container.example-stacked .example-render {
    position: relative;
    top: auto;
    right: auto;
    width: 100%;
    max-width: none;
    margin-top: 0;
}

/* YAML-only layout */
.example-container.example-yaml-only {
    display: block;
}

.example-container.example-yaml-only .example-code {
    flex: none;
}

/* Render-only layout */
.example-container.example-render-only {
    display: block;
}

.example-container.example-render-only .example-render {
    position: relative;
    top: auto;
    right: auto;
    width: 100%;
    max-width: none;
    border-left: none;
    flex: none;
}

.example-code {
    width: 100%;
    padding: 0;
    margin: 0;
    background-color: #f8f8f8;
    position: relative;
    display: flex;
    flex-direction: column;
    border: none;
    border-radius: 0;
    overflow-x: auto;
    overflow-y: visible;
}

/* Ensure all children fill the container and have gray background */
.example-code,
.example-code > *,
.example-code *,
.example-code pre,
.example-code code,
.example-code .yaml,
.example-code .yaml *,
.example-code .highlight,
.example-code .highlight * {
    background-color: #f8f8f8 !important;
    box-sizing: border-box;
}

/* Actions container for playground link in YAML-only or stacked layouts */
.example-actions {
    padding: 12px;
    background-color: #f8f8f8;
    border-top: 1px solid #e0e0e0;
    display: flex;
    justify-content: flex-end;
}

.playground-link-inline {
    position: static;
    display: inline-flex;
    width: auto;
    height: auto;
    padding: 6px 12px;
    border-radius: 4px;
    background-color: white;
    color: #333;
    border: 1px solid #ddd;
    font-size: 0.875rem;
    gap: 6px;
}

.playground-link-inline:hover {
    background-color: #f5f5f5;
    transform: none;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.playground-link-inline .playground-icon {
    font-size: 0.875rem;
}

/* Override mkdocs code block margins inside our container */
.example-code pre {
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    border: none !important;
    height: auto;
    width: 100%;
    overflow: visible !important;
    box-sizing: border-box;
    background-color: #f8f8f8 !important;
}

.example-code .yaml {
    margin: 0 !important;
    padding: 0 !important;
    width: 100%;
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: visible !important;
}

.example-code .yaml pre {
    margin: 0 !important;
    padding: 1em !important;
    border-radius: 0 !important;
    flex: 1;
    width: 100%;
    box-sizing: border-box;
    background-color: #f8f8f8 !important;
    min-height: auto;
    overflow: visible !important;
}

.example-code .yaml pre code {
    display: block;
    width: 100%;
    background-color: #f8f8f8 !important;
    padding: 0 !important;
    margin: 0 !important;
    white-space: pre;
}

/* Kill any whitespace or padding from code elements */
.example-code code {
    background-color: #f8f8f8 !important;
    padding: 0 !important;
}

.example-code .highlight {
    margin: 0 !important;
    padding: 0 !important;
    width: 100%;
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* Override Material theme's copy button positioning inside example containers */
.example-code .md-clipboard {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    z-index: 2;
}

/* `:not(.example-collapsed)` because this offset exists only to clear the
   floating preview. Collapsed, the preview is gone but the offset would keep
   parking the copy button ~44% + 2rem from the right edge — in the middle of
   the code it just uncovered. Added to the existing selector rather than as a
   new rule: this one is (0,6,0) with !important, so a lower-specificity
   override would lose. */
.example-container:not(.example-stacked):not(.example-yaml-only):not(.example-render-only):not(.example-collapsed) .example-code .md-clipboard,
.example-container:not(.example-stacked):not(.example-yaml-only):not(.example-render-only):not(.example-collapsed) .example-code .md-code__nav {
    right: calc(min(520px, 44%) + 2rem) !important;
    z-index: 4;
}

/* Remove any padding Material adds for copy button */
.example-code pre:has(.md-clipboard) {
    padding-right: 0.5rem !important;
}

/* ============================================
   Light Theme Syntax Highlighting for Examples
   Override dark Pygments colors for light background
   ============================================ */
.example-code,
.example-code .yaml,
.example-code pre,
.example-code code {
    color: #333 !important; /* Default text color */
}

/* YAML Keys - Red/Pink (Name.Tag) */
.example-code .nt {
    color: #DC2626 !important; /* dbt charts red */
}

/* Strings - Green */
.example-code .s,
.example-code .s1,
.example-code .s2,
.example-code .sb,
.example-code .sc,
.example-code .sh,
.example-code .sx {
    color: #059669 !important;
}

/* Numbers - Orange */
.example-code .m,
.example-code .mi,
.example-code .mf,
.example-code .mh,
.example-code .mo,
.example-code .mb,
.example-code .il {
    color: #D97706 !important;
}

/* Keywords/Constants (true, false, null) - Purple */
.example-code .k,
.example-code .kc {
    color: #7C3AED !important;
}

/* Comments - Gray italic */
.example-code .c,
.example-code .c1,
.example-code .cm,
.example-code .cs,
.example-code .ch,
.example-code .cp,
.example-code .cpf {
    color: #6B7280 !important;
    font-style: italic;
}

/* Punctuation (colons, brackets, pipes) - Gray */
.example-code .p {
    color: #6B7280 !important;
}

/* Names (SQL identifiers and unquoted YAML values) */
.example-code .n,
.example-code .no,
.example-code .nx {
    color: #374151 !important;
}

/* Jinja expressions - Cyan/Teal */
.example-code .si {
    color: #0891B2 !important;
}

/* Variables/Anchors - Blue */
.example-code .nv {
    color: #2563EB !important;
}

.example-render {
    position: absolute;
    top: 16px;
    right: 16px;
    width: min(520px, 44%);
    min-width: 0;
    max-width: 520px;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    overflow: visible;
    overscroll-behavior: contain;
    border: none;
    border-left: none;
    border-radius: 0;
    background-color: transparent;
    padding: 0;
    cursor: pointer;
    z-index: 3;
}

.example-render:hover .rendered-dashboard {
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.2);
    transform: scale(1.02);
}

.render-placeholder {
    width: 100%;
    height: 100%;
    min-height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f0f4f8;
    border: 2px dashed #cbd5e0;
    border-radius: 4px;
    color: #718096;
    font-family: monospace;
}

.rendered-dashboard {
    width: 100%;
    height: auto;
    min-width: 0;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 0;
    background-color: transparent;
    box-shadow: 0 14px 36px rgba(0, 0, 0, 0.16);
    transition: all 0.2s ease;
}

.rendered-dashboard svg {
    display: block;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    height: auto;
    margin-left: 0;
}

.example-render.example-zoom-preview .rendered-dashboard {
    overflow: hidden;
}

.example-render.example-zoom-preview .rendered-dashboard svg {
    width: 160%;
    min-width: 160%;
    height: auto;
    margin-left: -30%;
}

.dashboard-title {
    margin: 0 0 16px 0;
    padding: 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: #374151;
    border-bottom: 1px solid #e5e7eb;
    padding-bottom: 8px;
}

.rendered-chart {
    margin-bottom: 20px;
}

.rendered-chart:last-child {
    margin-bottom: 0;
}

.rendered-chart svg {
    max-width: 100%;
    height: auto;
    display: block;
}

.chart-error {
    padding: 10px;
    background-color: #fee2e2;
    border: 1px solid #fecaca;
    border-radius: 4px;
    color: #991b1b;
    font-size: 0.875rem;
}

.render-placeholder small {
    display: block;
    margin-top: 8px;
    font-size: 0.75rem;
    opacity: 0.7;
}

.playground-link {
    position: absolute;
    top: 16px;
    right: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background-color: rgba(0, 0, 0, 0.6);
    color: white;
    text-decoration: none;
    border-radius: 50%;
    font-size: 0.75rem;
    transition: all 0.2s ease;
    z-index: 1;
    backdrop-filter: blur(4px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.playground-link:hover {
    background-color: rgba(0, 0, 0, 0.8);
    color: white;
    text-decoration: none;
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

.playground-link:visited {
    color: white;
}

.playground-icon {
    font-size: 0.75rem;
    line-height: 1;
}

/* Modal styles */
.example-modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.34);
    backdrop-filter: blur(2px);
    align-items: center;
    justify-content: center;
    padding: 64px 24px 32px;
    box-sizing: border-box;
}

.example-modal.is-open {
    display: flex;
}

.example-modal:focus {
    outline: none;
}

.example-modal-content {
    position: relative;
    width: fit-content;
    max-width: min(96vw, 1280px);
    max-height: calc(100vh - 96px);
    overflow: visible;
}

.example-modal-close {
    color: white;
    font-size: 24px;
    font-weight: bold;
    cursor: pointer;
    border: 0;
    z-index: 1001;
    line-height: 1;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    background-color: transparent;
    transition: all 0.2s ease;
    flex-shrink: 0;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.45);
}

.example-modal-close:hover {
    color: white;
    background-color: transparent;
    transform: scale(1.05);
}

.example-modal-close:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.85);
    outline-offset: 3px;
}

.example-modal-actions {
    position: absolute;
    right: 0;
    top: -48px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    z-index: 2;
}

.example-modal-dashboard {
    max-height: calc(100vh - 96px);
    overflow: auto;
    position: relative;
}

.example-modal-dashboard .rendered-dashboard {
    width: fit-content;
    max-width: min(96vw, 1280px);
}

/* Larger playground button in modal */
.playground-link.playground-link-modal {
    position: static;
    width: auto;
    height: auto;
    padding: 6px 8px;
    border-radius: 4px;
    font-size: 0.875rem;
    gap: 8px;
    background-color: transparent;
    color: white;
    border: 0;
    box-shadow: none;
    backdrop-filter: none;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.45);
}

.playground-link.playground-link-modal:hover {
    background-color: transparent;
    color: white;
    transform: none;
    box-shadow: none;
}

.playground-link.playground-link-modal:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.85);
    outline-offset: 3px;
}

.playground-link-modal .playground-text {
    display: inline;
    color: white;
}

.playground-link-modal .playground-icon {
    font-size: 0.875rem;
    color: white;
}

/* Responsive - on smaller screens, stack instead of overlay */
@media (max-width: 768px) {
    .example-container {
        display: block;
    }

    .example-render {
        position: relative;
        top: auto;
        right: auto;
        width: 100%;
        max-width: none;
        margin-top: 16px;
        border-left: none;
        border-top: none;
        padding: 0;
    }

    .example-container:not(.example-stacked):not(.example-yaml-only):not(.example-render-only) .example-code .md-clipboard,
    .example-container:not(.example-stacked):not(.example-yaml-only):not(.example-render-only) .example-code .md-code__nav {
        right: 0.5rem !important;
    }


    .example-render.example-zoom-preview .rendered-dashboard svg {
        width: 140%;
        min-width: 140%;
        margin-left: -20%;
    }

    .example-modal-content {
        max-width: 100%;
        max-height: calc(100vh - 88px);
    }

    .example-modal-dashboard {
        max-height: calc(100vh - 88px);
    }

    .example-modal-actions {
        top: -44px;
    }
}

/* ============================================
   Getting the floating preview out of the way
   ============================================ */

/* `.example-render` is absolutely positioned over `.example-code`, and that
   pane's descendants are forced `overflow: visible`, so a long line runs
   underneath the preview and no scrollbar ever appears to say so. These two
   controls let the reader put the preview aside and bring it back. Injected by
   example-modal.js rather than emitted in the markup, because the markup comes
   from the published dbt-charts markdown integration and this is a docs-site
   affordance. */

.example-dismiss {
    position: absolute;
    top: 6px;
    left: 6px;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 1px solid var(--md-default-fg-color--lightest, #e0e0e0);
    border-radius: 50%;
    background-color: var(--md-default-bg-color, #ffffff);
    color: var(--md-default-fg-color, #1f2937);
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    /* Hidden until the reader is on the preview, so it does not sit on the
       board in every screenshot of every example. */
    opacity: 0;
    transition: opacity 0.15s ease;
}

/* Upper LEFT, not the conventional upper right: the playground button already
   owns the upper right, and this corner is the one nearest the code the
   preview is covering. */
.example-render:hover .example-dismiss,
.example-render:focus-within .example-dismiss {
    opacity: 1;
}

.example-dismiss:hover {
    border-color: var(--md-accent-fg-color, #FE6703);
    color: var(--md-accent-fg-color, #FE6703);
}

/* Keyboard reach does not depend on the pointer: a focused control is visible
   regardless of the :focus-within rule above. */
.example-dismiss:focus-visible,
.example-expand:focus-visible {
    opacity: 1;
    outline: 2px solid var(--md-accent-fg-color, #FE6703);
    outline-offset: 2px;
}

.example-expand {
    display: none;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid var(--md-default-fg-color--lightest, #e0e0e0);
    border-radius: 50%;
    background-color: var(--md-default-bg-color, #ffffff);
    color: var(--md-accent-fg-color, #FE6703);
    font-size: 12px;
    line-height: 1;
    cursor: pointer;
}

/* Collapsed: the board and the playground link go, the preview box stops
   reserving width, and the expand control is all that is left parked in the
   corner — so the code pane underneath is fully readable. */
.example-container.example-collapsed .example-render {
    width: auto;
    min-width: 0;
    max-width: none;
    background-color: transparent;
    pointer-events: none;
}

.example-container.example-collapsed .rendered-dashboard,
.example-container.example-collapsed .playground-link,
.example-container.example-collapsed .example-dismiss {
    display: none;
}

.example-container.example-collapsed .example-expand {
    display: flex;
    pointer-events: auto;
}


/* The preview stacks below the code under 768px and covers nothing, so the
   dismiss control has nothing to dismiss. It has to be removed rather than left
   invisible: `opacity: 0` still hit-tests, there is no hover on touch, and a tap
   near the preview's corner would collapse the board it was meant to open.

   This block sits at the end of the file on purpose — the base `.example-dismiss`
   and `.example-expand` rules above are the same specificity, so an earlier
   media block loses to them on source order and the controls stay visible. */
@media screen and (max-width: 768px) {
    .example-dismiss,
    .example-expand {
        display: none;
    }
}