/* Line 15800 (upskill-doors-1-r2, ai.features.doors_upskill_1): the Google path for the doors this key dresses.
   The --ns-* names and values are public/css/ns-tokens.css's (Google's surface greys, #202124 ink, #5f6368
   secondary, NetShow gold as the accent). Linked only while the key is on, by:
     - resources/views/activation/partials/theme.blade.php  (every /start step: light by default, dark on a dark system);
     - resources/views/agents/partials/alive-trial-composer.blade.php  (the trial composer card, same two sets);
     - resources/views/alive/present(-3d).blade.php and act/embed-stage.blade.php  (the stages: the dark set always,
       because the host's face sits on it; the --pv-* palette reads the tokens).
   375 px first; nothing here draws a bubble, pill or dock, and no rule hides the live host. */

/* 1. Token sets. */
body.ns-content-page,
.afd-composer {
    --ns-bg: #ffffff;
    --ns-bg-deep: #f8f9fa;
    --ns-surface: #f1f3f4;
    --ns-elevated: #e8eaed;
    --ns-card: #ffffff;
    --ns-text: #202124;
    --ns-text-2: #5f6368;
    --ns-gold: #f9ab00;
    --ns-gold-light: #b06000;
    --ns-gold-deep: #e37400;
    --ns-gold-glow: rgba(249, 171, 0, .22);
    --ns-gold-border: rgba(176, 96, 0, .3);
    --ns-border: rgba(60, 64, 67, .14);
    --ns-border-strong: rgba(60, 64, 67, .26);
    --ns-on-accent: #202124;
    --ns-focus: #1a73e8;
    --ns-font: Roboto, 'Google Sans', 'Segoe UI', system-ui, -apple-system, Arial, sans-serif;
    --ns-radius: 12px;
    color-scheme: light;
}

@media (prefers-color-scheme: dark) {
    body.ns-content-page,
    .afd-composer {
        --ns-bg: #202124;
        --ns-bg-deep: #1b1c1f;
        --ns-surface: #292a2d;
        --ns-elevated: #35363a;
        --ns-card: #2d2e31;
        --ns-text: #e8eaed;
        --ns-text-2: #9aa0a6;
        --ns-gold: #f5a623;
        --ns-gold-light: #fdd663;
        --ns-gold-deep: #c7851a;
        --ns-gold-glow: rgba(245, 166, 35, .22);
        --ns-gold-border: rgba(245, 166, 35, .32);
        --ns-border: rgba(232, 234, 237, .12);
        --ns-border-strong: rgba(232, 234, 237, .2);
        --ns-focus: #8ab4f8;
        color-scheme: dark;
    }
}

/* The public agent page is dark in both schemes, so its composer card takes the dark set there. */
.agent-profile .afd-composer {
    --ns-bg: #202124;
    --ns-surface: #292a2d;
    --ns-card: #2d2e31;
    --ns-text: #e8eaed;
    --ns-text-2: #9aa0a6;
    --ns-gold: #f5a623;
    --ns-gold-light: #fdd663;
    --ns-gold-glow: rgba(245, 166, 35, .22);
    --ns-gold-border: rgba(245, 166, 35, .32);
    --ns-border: rgba(232, 234, 237, .12);
    --ns-border-strong: rgba(232, 234, 237, .2);
    --ns-focus: #8ab4f8;
    color-scheme: dark;
}

/* The stages: the dark set always. */
body.pv {
    --ns-bg: #202124;
    --ns-bg-deep: #1b1c1f;
    --ns-surface: #292a2d;
    --ns-card: #2d2e31;
    --ns-text: #e8eaed;
    --ns-text-2: #9aa0a6;
    --ns-gold: #f5a623;
    --ns-border: rgba(232, 234, 237, .12);
    --ns-speaking: #5eead4;
    --ns-focus: #8ab4f8;
    --ns-font: Roboto, 'Google Sans', 'Segoe UI', system-ui, -apple-system, Arial, sans-serif;
    --ns-radius: 12px;
    --pv-ground-a: var(--ns-bg-deep);
    --pv-ground-b: var(--ns-bg);
    --pv-ink: var(--ns-text);
    --pv-dim: var(--ns-text-2);
    --pv-line: var(--ns-border);
    --pv-amber: var(--ns-gold);
    --pv-teal: var(--ns-speaking);
    --pv-blue: var(--ns-focus);
    --pv-sans: var(--ns-font);
    background: var(--ns-bg);
    color: var(--ns-text);
    font-family: var(--ns-font);
}

/* 2. /start (every step): one calm column of cards, one clear next step. */
body.ns-content-page {
    --ns-c-text-2: var(--ns-text-2);
    background: var(--ns-bg);
    color: var(--ns-text);
    font-family: var(--ns-font);
}
body.ns-content-page :is(.landing-header, .ns-content-hero, .ns-content-body, .ns-content-cta) {
    background: var(--ns-bg);
    color: var(--ns-text);
    border-color: var(--ns-border);
}
body.ns-content-page .landing-header a:not(.landing-btn-primary) { color: var(--ns-text); }
body.ns-content-page :is(h1, h2, h3, h4, .h4, .text-white, .ns-activation-option__title, .ns-activation-guide__title, .ns-activation-radio__title) {
    color: var(--ns-text) !important;
}
body.ns-content-page :is(p, .ns-activation-option__copy, .ns-activation-guide__copy, .ns-activation-radio__copy, .ns-activation-option__meta, .ns-activation-summary) {
    color: var(--ns-text-2);
}
body.ns-content-page :is(.ns-activation-panel, .ns-activation-panel--soft, .ns-activation-guide, .ns-activation-option, .ns-activation-radio__card, .ns-activation-demo) {
    background: var(--ns-card);
    border: 1px solid var(--ns-border);
    border-radius: var(--ns-radius);
    box-shadow: none;
    color: var(--ns-text);
}
body.ns-content-page .ns-activation-option:hover,
body.ns-content-page .ns-activation-radio input:checked + .ns-activation-radio__card {
    border-color: var(--ns-gold-border);
    background: var(--ns-surface);
}
body.ns-content-page :is(.ns-activation-eyebrow, .ns-activation-badge) {
    background: var(--ns-surface);
    border-color: var(--ns-border);
    color: var(--ns-text-2);
}
body.ns-content-page .ns-activation-option__icon {
    background: var(--ns-surface);
    color: var(--ns-gold-light);
}
body.ns-content-page .ns-activation-link { color: var(--ns-gold-light); }
body.ns-content-page :is(.ns-btn-primary, .landing-btn-primary) {
    background: var(--ns-gold);
    border-color: var(--ns-gold);
    color: var(--ns-on-accent);
    border-radius: var(--ns-radius);
}
body.ns-content-page :is(.ns-btn-secondary, .ns-btn-ghost) {
    background: var(--ns-surface);
    border: 1px solid var(--ns-border-strong);
    color: var(--ns-text);
    border-radius: var(--ns-radius);
}
body.ns-content-page :is(input, select, textarea) {
    background: var(--ns-surface);
    border-color: var(--ns-border-strong);
    color: var(--ns-text);
    font-size: 1rem;
}
body.ns-content-page :focus-visible { outline: 2px solid var(--ns-focus); outline-offset: 3px; }

/* 3. The trial composer card. */
.afd-composer {
    color: var(--ns-text);
    font-family: var(--ns-font);
    background: var(--ns-card);
    border: 1px solid var(--ns-border);
    border-radius: var(--ns-radius);
    padding: .75rem;
}
.afd-composer .afd-composer__bubble {
    background: var(--ns-surface);
    border-color: var(--ns-border);
    color: var(--ns-text);
    border-radius: var(--ns-radius);
}
.afd-composer .afd-composer__bubble--visitor {
    background: var(--ns-gold-glow);
    border-color: var(--ns-gold-border);
}
.afd-composer textarea {
    background: var(--ns-bg);
    color: var(--ns-text);
    border: 1px solid var(--ns-border-strong);
    border-radius: var(--ns-radius);
    font-family: var(--ns-font);
    font-size: 1rem;
}
.afd-composer button[type="submit"] {
    background: var(--ns-gold);
    color: var(--ns-on-accent);
    border: 0;
    border-radius: var(--ns-radius);
    font-weight: 600;
}
.afd-composer :is(.afd-composer__meter, .afd-composer__status) { color: var(--ns-text-2); }
.afd-composer .afd-composer__continue { color: var(--ns-gold-light); }
.afd-composer :focus-visible { outline: 2px solid var(--ns-focus); outline-offset: 2px; }

@media (max-width: 480px) {
    body.ns-content-page :is(.ns-activation-hero-actions, .ns-activation-actions) .ns-btn { width: 100%; justify-content: center; }
    .afd-composer { padding: .5rem; }
}