/* SimVX docs overlay: retunes Furo to match simvx.com.
   simvx.com palette: bg #0a0a0a, card #0f0f0f, border #1a1a1a, accent #00ff9d, blue #00b8ff. */

/* Light mode: darker green for readable contrast on Furo's white background.
   #008844 ≈ 4.5 : 1 on white (meets WCAG AA). Hover shifts to the blue accent. */
:root, body, body[data-theme="light"] {
    --color-brand-primary: #008844;
    --color-brand-content: #008844;
    --color-brand-visited: #007ac0;
    --color-link: #008844;
    --color-link-underline: transparent;
    --color-link--hover: #007ac0;
    --color-link-underline--hover: #007ac0;
}

/* Dark mode: neon green on near-black is fine (~15 : 1). */
body[data-theme="dark"] {
    --color-brand-primary: #00ff9d;
    --color-brand-content: #00ff9d;
    --color-brand-visited: #00b8ff;
    --color-link: #00ff9d;
    --color-link-underline: transparent;
    --color-link--hover: #00b8ff;
    --color-link-underline--hover: #00b8ff;
}

/* Dark mode uses Furo's native charcoal palette (#131416): the look that
   previously only appeared in Auto mode. We deliberately do NOT override the
   dark background here: the old override forced near-black #0a0a0a but was
   scoped to [data-theme="dark"] only, so Auto-on-a-dark-OS (data-theme="auto")
   fell through to Furo's charcoal: producing two different "dark" shades.
   Letting Furo own the dark background makes every dark state identical.
   Only the brand/link greens above are retuned. */

/* ── top nav ───────────────────────────────────────────────────────────── */
.simvx-topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 2rem;
    background: rgba(10, 10, 10, 0.95);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid #1a1a1a;
    position: sticky;
    top: 0;
    z-index: 100;
    font-family: "Consolas", "Monaco", "Courier New", monospace;
}
.simvx-topbar .logo {
    font-size: 1.4rem;
    font-weight: 700;
    letter-spacing: 3px;
    background: linear-gradient(135deg, #00ff9d, #00b8ff);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-decoration: none;
}
.simvx-topbar .links {
    display: flex;
    gap: 1.75rem;
}
.simvx-topbar .links a {
    color: #b0b0b0;
    text-decoration: none;
    font-size: 0.82rem;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    transition: color 0.25s;
}
.simvx-topbar .links a:hover { color: #00ff9d; }

/* ── editor banner above gallery ───────────────────────────────────────── */
.editor-banner {
    display: inline-flex;
    align-items: center;
    gap: 0.9rem;
    margin: 0.5rem 0 1.25rem;
    padding: 0.5rem 0.5rem 0.5rem 0.9rem;
    background: #0f0f0f;
    border: 1px solid #1a1a1a;
    border-left: 2px solid #00ff9d;
    border-radius: 4px;
    max-width: 100%;
}
.editor-banner-text {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    flex-wrap: wrap;
    min-width: 0;
}
.editor-banner-text strong {
    color: #00ff9d;
    font-size: 0.85rem;
    letter-spacing: 0.3px;
    font-weight: 600;
}
.editor-banner-sub {
    color: #909090;
    font-size: 0.78rem;
}
.editor-banner-btn {
    padding: 0.4rem 0.9rem;
    border: 1px solid #00ff9d;
    background: #00ff9d;
    color: #0a0a0a !important;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.78rem;
    letter-spacing: 0.5px;
    border-radius: 3px;
    transition: background 0.2s, color 0.2s;
    white-space: nowrap;
}
.editor-banner-btn:hover {
    background: #00cc7d;
    color: #0a0a0a !important;
}
.editor-banner-beta {
    display: inline-block;
    margin-left: 0.4rem;
    padding: 0.02rem 0.3rem;
    font-size: 0.6rem;
    letter-spacing: 1px;
    color: #ffb86c;
    border: 1px solid #ffb86c;
    border-radius: 2px;
    vertical-align: middle;
    text-transform: uppercase;
    font-weight: 600;
}

/* ── gallery: filter bar + cards ───────────────────────────────────────── */
.gallery-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    align-items: center;
    justify-content: space-between;
    margin: 1rem 0 2rem;
    padding: 1rem 1.25rem;
    background: #0f0f0f;
    border: 1px solid #1a1a1a;
    border-radius: 6px;
}
.gallery-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}
.gallery-filters label {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.85rem;
    color: #b0b0b0;
    cursor: pointer;
    user-select: none;
}
.gallery-filters input[type="checkbox"] {
    accent-color: #00ff9d;
}
#gallery-search {
    flex: 1;
    min-width: 200px;
    max-width: 320px;
    padding: 0.45rem 0.75rem;
    background: #0a0a0a;
    border: 1px solid #2a2a2a;
    color: #e0e0e0;
    font-family: inherit;
    font-size: 0.85rem;
    border-radius: 4px;
}
#gallery-search:focus {
    outline: none;
    border-color: #00ff9d;
}

.gallery-pagination {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: center;
    justify-content: space-between;
    margin: 0 0 1.5rem;
    padding: 0.6rem 1rem;
    background: #0f0f0f;
    border: 1px solid #1a1a1a;
    border-radius: 6px;
    font-size: 0.85rem;
    color: #b0b0b0;
}
.gallery-pagination select {
    background: #0a0a0a;
    color: #e0e0e0;
    border: 1px solid #2a2a2a;
    padding: 0.3rem 0.5rem;
    margin-left: 0.4rem;
    font-family: inherit;
    border-radius: 3px;
}
.gallery-pagination select:focus { outline: none; border-color: #00ff9d; }
.gallery-count { color: #b0b0b0; }
.gallery-count #gallery-shown, .gallery-count #gallery-total { color: #00ff9d; }
.gallery-pages {
    display: flex;
    gap: 0.25rem;
    align-items: center;
}
.gallery-pages button {
    background: #0a0a0a;
    color: #e0e0e0;
    border: 1px solid #2a2a2a;
    padding: 0.3rem 0.6rem;
    min-width: 2rem;
    font-family: inherit;
    cursor: pointer;
    border-radius: 3px;
    transition: border-color 0.2s, color 0.2s;
}
.gallery-pages button:hover:not(:disabled) { border-color: #00ff9d; color: #00ff9d; }
.gallery-pages button:disabled { opacity: 0.4; cursor: not-allowed; }
.gallery-pages button.current {
    background: #00ff9d;
    color: #0a0a0a;
    border-color: #00ff9d;
    font-weight: 600;
}
.gallery-dots { color: #555; padding: 0 0.25rem; }

/* Gallery page: keep the left nav drawer, drop only the right TOC, and
   stretch the main content to use all remaining horizontal space so
   cards have room at 4–6 columns. Furo's default content max-width
   (46em / ~736px) is too narrow for a card grid even with the right
   sidebar gone. */
body.gallery-page .toc-drawer,
body.gallery-page .toc-sticky { display: none !important; }
body.gallery-page .main { max-width: 100% !important; }
body.gallery-page .content {
    max-width: 100% !important;
    width: 100% !important;
}
body.gallery-page .article-container,
body.gallery-page article {
    max-width: 100% !important;
    width: 100% !important;
}

.gallery-grid { margin-top: 0.5rem; }

/* Width-driven card grid. sphinx-design's row picks a fixed column count from
   the *viewport* breakpoint (…-lg-6), so when the left sidebar appears the
   content shrinks but the column count doesn't: cards get squeezed narrow.
   Drive the columns from the container's actual width instead: cards keep a
   minimum width whether or not the sidebar is showing (we drop a column rather
   than squeeze), and gain columns as the window widens. */
body.gallery-page .gallery-grid .sd-row {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 0.75rem;
    margin: 0 !important;
}
body.gallery-page .gallery-grid .sd-row > .sd-col {
    width: 100% !important;
    max-width: 100% !important;
    flex: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.example-card {
    background: #0f0f0f !important;
    border: 1px solid #1a1a1a !important;
    transition: border-color 0.25s, transform 0.25s, background 0.25s;
}
.example-card:hover {
    border-color: #00ff9d !important;
    background: #141414 !important;
    transform: translateY(-2px);
}
.example-card img {
    aspect-ratio: 4 / 3;
    object-fit: cover;
    background: #050505;
}
.example-card-hidden { display: none !important; }
/* The cards keep their dark surface in BOTH themes (the look the gallery is
   going for), so their title + description must stay light in both: otherwise
   light mode renders dark-on-dark and the text is unreadable. */
.example-card .sd-card-text,
.example-card .sd-card-text strong {
    color: #e0e0e0;
}
/* Cap the description (2nd card-text paragraph: title, description, meta) so a
   wordy example can't stretch its card super tall: overflow ends in an "…". */
.example-card .sd-card-body .sd-card-text:nth-child(2) {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    line-clamp: 4;
    overflow: hidden;
}
.card-meta {
    display: inline-block;
    margin-top: 0.5rem;
    font-size: 0.72rem;
    color: #00ff9d;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

/* ── per-example page actions ──────────────────────────────────────────── */
.example-run-button {
    display: inline-block;
    margin: 0.5rem 0 1rem;
    padding: 0.6rem 1.2rem;
    background: #00ff9d;
    color: #0a0a0a !important;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-decoration: none;
    border-radius: 4px;
    transition: background 0.25s;
}
.example-run-button:hover { background: #00b8ff; }
.example-docs-badge {
    display: inline-block;
    margin: 0.5rem 0 1rem;
    padding: 0.4rem 0.9rem;
    background: #2a2a2a;
    color: #b0b0b0;
    font-size: 0.85rem;
    border-radius: 4px;
}