/* Shared landing/help palettes. theme.js follows the system preference unless
   the visitor chooses a theme. App screenshots and phone frames stay dark. */
:root {
    color-scheme: dark;
    --bg: #0f172a;
    --surface: #111c30;
    --card: #1e293b;
    --border: #334155;
    --text: #f1f5f9;
    --body: #cbd5e1;
    --muted: #94a3b8;
    --link: #22d3ee;
    --button: #22d3ee;
    --button-hover: #67e8f9;
    --on-button: #0f172a;
    --nav-bg: rgba(15, 23, 42, .88);
    --float-bg: rgba(30, 41, 59, .92);
    --float-shadow: rgba(0, 0, 0, .22);
    --hover: rgba(148, 163, 184, .08);
    --tint: rgba(34, 211, 238, .06);
    --tint-border: rgba(34, 211, 238, .2);
    --radius: 14px;
}

:root[data-theme="light"] {
    color-scheme: light;
    --bg: #f8fafc;
    --surface: #f1f5f9;
    --card: #ffffff;
    --border: #cbd5e1;
    --text: #0f172a;
    --body: #334155;
    --muted: #475569;
    --link: #0e7490;
    --button: #0e7490;
    --button-hover: #155e75;
    --on-button: #ffffff;
    --nav-bg: rgba(248, 250, 252, .88);
    --float-bg: rgba(255, 255, 255, .92);
    --float-shadow: rgba(15, 23, 42, .12);
    --hover: rgba(15, 23, 42, .04);
    --tint: rgba(14, 116, 144, .06);
    --tint-border: rgba(14, 116, 144, .2);
}

:focus-visible {
    outline: 3px solid var(--link);
    outline-offset: 4px;
}

.hero h1 span { color: var(--link); }
.lang-switch a.active { text-decoration: underline; text-underline-offset: 4px; }

/* The switch, in the language pill. */
.theme-switch {
    margin-left: 4px; padding-left: 9px; border: 0; border-left: 1px solid var(--border);
    background: none; color: var(--muted); font: inherit; font-size: 14px; line-height: 1;
    cursor: pointer;
}
.theme-switch:hover { color: var(--text); }
.theme-switch:focus-visible { border-radius: 4px; }

/* Small screens: the nav's section links behind ☰ (theme.js opens it). On
   wide screens the list is part of the nav row as before. */
.nav-menu-list { display: contents; }
.nav-menu { display: none; }
@media (max-width: 720px) {
    .nav-links { gap: 8px; }
    .nav-menu {
        display: inline-flex; align-items: center; justify-content: center;
        width: 40px; height: 40px; border: 0; border-radius: 10px;
        background: none; color: var(--text); cursor: pointer;
    }
    .nav-menu:hover { background: var(--hover); }
    .nav-menu-list {
        display: none; position: absolute; top: 100%; left: 0; right: 0;
        flex-direction: column; padding: 4px 20px 8px;
        background: var(--bg); border-bottom: 1px solid var(--border);
        box-shadow: 0 12px 24px var(--float-shadow);
    }
    nav.menu-open .nav-menu-list { display: flex; }
    .nav-links .nav-menu-list a {
        padding: 12px 0; font-size: 16px; color: var(--text);
        border-bottom: 1px solid var(--border);
    }
    .nav-links .nav-menu-list a:last-child { border-bottom: 0; }
}
/* The narrowest (an iPhone mini zoomed): the logo without its name. */
@media (max-width: 359px) {
    .nav-brand span { display: none; }
}