/* AidaIDE site theme — dark default, light via html[data-theme="light"] */
/* Specificity html[data-theme] beats page :root so light mode wins everywhere. */

:root,
html[data-theme="dark"] {
    color-scheme: dark;
    --bg: #0a0b14;
    --bg-card: #12141f;
    --bg-hover: #1a1d2e;
    --bg-inset: #0d0f1a;
    --card: #12141f;
    --inset: #0d0f1a;
    --yellow: #e8d44d;
    --cyan: #4ecdc4;
    --purple: #a78bfa;
    --orange: #f97316;
    --green: #4ade80;
    --blue: #3b82f6;
    --red: #f87171;
    --text: #f2f3f8;
    --text-bright: #e8ebf4;
    --text-dim: #a0a8c0;
    --dim: #a0a8c0;
    --border: #2a3148;
    --nav-bg: rgba(10, 11, 20, 0.96);
    --nav-bg-solid: #0a0b14;
    --glow-cyan: rgba(78, 205, 196, 0.15);
    --glow-yellow: rgba(232, 212, 77, 0.15);
    --glow-blue: rgba(59, 130, 246, 0.12);
    --shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
    --theme-toggle-bg: #12141f;
    --theme-toggle-border: #2a3148;
    --input-bg: #0d0f1a;
    --code-bg: rgba(78, 205, 196, 0.08);
    --st-backlog: #8b93a8;
    --st-claimed: #e8d44d;
    --st-doing: #4ecdc4;
    --st-review: #fb923c;
    --st-done: #4ade80;
    --task-backlog-bg: #141722;
    --task-claimed-bg: #1a1810;
    --task-doing-bg: #101a1a;
    --task-review-bg: #1a1410;
    --task-done-bg: #101814;
    --task-reject-bg: #1a1214;
}

html[data-theme="light"] {
    color-scheme: light;
    --bg: #f3f5fa;
    --bg-card: #ffffff;
    --bg-hover: #e8ecf4;
    --bg-inset: #e8edf5;
    --card: #ffffff;
    --inset: #e8edf5;
    --yellow: #a16207;
    --cyan: #0f766e;
    --purple: #6d28d9;
    --orange: #c2410c;
    --green: #15803d;
    --blue: #1d4ed8;
    --red: #dc2626;
    --text: #0f172a;
    --text-bright: #1e293b;
    --text-dim: #334155;
    --dim: #334155;
    --border: #cbd5e1;
    --nav-bg: rgba(255, 255, 255, 0.96);
    --nav-bg-solid: #ffffff;
    --glow-cyan: rgba(15, 118, 110, 0.12);
    --glow-yellow: rgba(161, 98, 7, 0.12);
    --glow-blue: rgba(29, 78, 216, 0.1);
    --shadow: 0 12px 32px rgba(15, 23, 42, 0.08);
    --theme-toggle-bg: #ffffff;
    --theme-toggle-border: #cbd5e1;
    --input-bg: #ffffff;
    --code-bg: rgba(15, 118, 110, 0.08);
    --st-backlog: #475569;
    --st-claimed: #a16207;
    --st-doing: #0f766e;
    --st-review: #c2410c;
    --st-done: #15803d;
    --task-backlog-bg: #eef1f7;
    --task-claimed-bg: #fff8e8;
    --task-doing-bg: #e8f7f6;
    --task-review-bg: #fff1e8;
    --task-done-bg: #eaf7ef;
    --task-reject-bg: #fdecec;
}

/* Force sticky/site navs off hardcoded dark paint in light mode */
html[data-theme="light"] nav,
html[data-theme="light"] nav.site-nav,
html[data-theme="light"] .site-nav {
    background: var(--nav-bg) !important;
    border-bottom-color: var(--border) !important;
}
html[data-theme="light"] .logo-text .aida,
html[data-theme="light"] .logo .aida {
    color: var(--text) !important;
}
html[data-theme="light"] .logo-text .ide,
html[data-theme="light"] .logo .ide {
    color: var(--cyan) !important;
}

/* Clear Light | Dark switch in the top nav */
.aida-theme-switch {
    display: inline-flex;
    align-items: center;
    gap: 0;
    margin-left: 8px;
    border: 1px solid var(--border);
    border-radius: 999px;
    overflow: hidden;
    background: var(--bg-card);
    flex-shrink: 0;
}
.aida-theme-switch button {
    appearance: none;
    border: 0;
    background: transparent;
    color: var(--text-dim);
    font: inherit;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    padding: 7px 12px;
    cursor: pointer;
    line-height: 1;
}
.aida-theme-switch button + button {
    border-left: 1px solid var(--border);
}
.aida-theme-switch button[aria-pressed="true"] {
    background: var(--cyan);
    color: #fff;
}
.aida-theme-switch button:focus-visible {
    outline: 2px solid var(--cyan);
    outline-offset: 2px;
    z-index: 1;
}
html[data-theme="light"] .aida-theme-switch button[aria-pressed="true"] {
    color: #fff;
}

/* Compact floating fallback when no nav exists */
.aida-theme-toggle {
    position: fixed;
    right: 14px;
    bottom: 14px;
    z-index: 1200;
    display: none;
    align-items: center;
    gap: 8px;
    height: 40px;
    padding: 0 14px;
    border-radius: 999px;
    border: 1px solid var(--theme-toggle-border);
    background: var(--theme-toggle-bg);
    color: var(--text);
    box-shadow: var(--shadow);
    cursor: pointer;
    font: inherit;
    font-size: 0.82rem;
    font-weight: 700;
}
.aida-theme-toggle.show-fallback {
    display: inline-flex;
}
.aida-theme-toggle:hover {
    border-color: var(--cyan);
}
.aida-theme-toggle:focus-visible {
    outline: 2px solid var(--cyan);
    outline-offset: 2px;
}
@media (max-width: 720px) {
    body.m-team-app .aida-theme-toggle.show-fallback {
        bottom: calc(72px + env(safe-area-inset-bottom, 0px));
    }
    .aida-theme-switch button {
        padding: 7px 10px;
        font-size: 0.72rem;
    }
}

.aida-use-nav-bg,
nav.aida-themed-nav,
#boardTabs.aida-themed-nav,
.topbar.aida-themed-nav,
.bottom-nav.aida-themed-nav {
    background: var(--nav-bg) !important;
}

/* -------------------------------------------------------------------------- */
/* Sitewide phone polish (desktop pages + ?desktop=1 escape)                  */
/* Loaded after page <style> blocks so these rules can win with !important.   */
/* -------------------------------------------------------------------------- */
@media (max-width: 768px) {
    html, body {
        overflow-x: clip;
        max-width: 100%;
    }
    img, video, canvas, iframe, svg {
        max-width: 100%;
        height: auto;
    }
    /* Prefer hamburger drawer whenever a page ships .nav-toggle */
    .nav-toggle {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        min-width: 44px;
        min-height: 44px;
    }
    nav .nav-inner,
    .site-nav .nav-inner,
    header .nav-inner {
        flex-wrap: nowrap;
        gap: 8px;
        padding-left: 12px;
        padding-right: 12px;
    }
    nav .nav-links:not(.is-open),
    .site-nav .nav-links:not(.is-open) {
        display: none !important;
    }
    nav .nav-links.is-open,
    .site-nav .nav-links.is-open {
        display: flex !important;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        z-index: 200;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0 !important;
        padding: 8px 0 12px;
        background: var(--nav-bg-solid, var(--bg-card));
        border-bottom: 1px solid var(--border);
        box-shadow: var(--shadow);
        max-height: min(70vh, 520px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    nav .nav-links.is-open a,
    .site-nav .nav-links.is-open a {
        padding: 14px 18px !important;
        font-size: 1rem !important;
        white-space: normal !important;
        border-bottom: 1px solid var(--border);
    }
    nav, .site-nav { position: relative; }

    /* Common marketing grids → single column */
    .pricing-grid,
    .features-grid,
    .audience-grid,
    .modules-grid,
    .builder-grid,
    .agent-ui-grid,
    .compare-grid,
    .cards-grid,
    .vs-grid,
    .plan-grid,
    .footer-inner {
        grid-template-columns: 1fr !important;
    }
    .hero, .hero-content, .section-inner, .page-wrap, main {
        padding-left: max(14px, env(safe-area-inset-left, 0px));
        padding-right: max(14px, env(safe-area-inset-right, 0px));
    }
    .hero h1, .hero-content h1, h1.page-title {
        font-size: clamp(1.55rem, 7vw, 2.1rem) !important;
        line-height: 1.2 !important;
        overflow-wrap: anywhere;
    }
    .hero-btns, .cta-btns, .os-row, .tier-row {
        flex-direction: column !important;
        align-items: stretch !important;
    }
    .hero-btns a, .cta-btns a, .btn {
        justify-content: center;
    }
    /* Theme switch stays usable next to logo */
    .aida-theme-switch {
        margin-left: 0;
    }
    .aida-theme-switch button {
        padding: 6px 9px;
        font-size: 0.7rem;
    }
    /* Docs-style sidebars: stack */
    .docs-layout, .docs-shell, .with-sidebar {
        display: block !important;
    }
    .docs-sidebar, .sidebar, aside.toc {
        width: 100% !important;
        max-width: none !important;
        position: static !important;
        margin-bottom: 16px;
    }
    pre, code, .code-block, .terminal, .term-mock {
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    table {
        display: block;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* v2 nav switch */