/* Line 15804 (upskill-doors-5-r1, ai.features.doors_google_path): the Google path for the doors pages that are not in the
   split shell. Every value is a --ns-* token from css/ns-tokens.css (.ns-gp: light by default, dark with the device);
   nothing here draws a colour of its own. Loaded only while the key is on.
   - .ns-doors-gp  the /get-started selector and the five segment pages (Bootstrap dark cards re-dressed);
   - .ns-doors-pp  the ended and kept prospect preview pages;
   - .ns-doors-proof  the "shipped by our AI agent team" line, wherever a page carries it. */

.ns-doors-gp {
    font-family: var(--ns-font);
    color: var(--ns-text);
}

body:has(.ns-doors-gp) { background: var(--ns-bg) !important; color: var(--ns-text); }

.ns-doors-gp h1, .ns-doors-gp h2, .ns-doors-gp h3, .ns-doors-gp h4,
.ns-doors-gp .h2, .ns-doors-gp .h4, .ns-doors-gp .h5, .ns-doors-gp .h6 {
    color: var(--ns-text);
    letter-spacing: 0;
}

.ns-doors-gp .text-muted { color: var(--ns-text-2) !important; }

.ns-doors-gp .card,
.ns-doors-gp .card.bg-dark {
    background: var(--ns-card) !important;
    color: var(--ns-text);
    border: 1px solid var(--ns-border) !important;
    border-radius: var(--ns-radius);
    box-shadow: 0 1px 2px rgba(60, 64, 67, .12), 0 1px 3px 1px rgba(60, 64, 67, .08);
}

.ns-doors-gp .card:hover,
.ns-doors-gp .card:focus-within { border-color: var(--ns-border-strong) !important; }

.ns-doors-gp .card-footer { background: transparent; border-top: 1px solid var(--ns-border) !important; }

.ns-doors-gp .badge.bg-dark {
    background: var(--ns-surface) !important;
    color: var(--ns-text-2);
    border-color: var(--ns-border) !important;
}

.ns-doors-gp .btn-outline-secondary {
    color: var(--ns-text);
    border-color: var(--ns-border-strong);
    border-radius: 999px;
}

.ns-doors-gp .btn { border-radius: 999px; min-height: 40px; }

.ns-doors-gp .btn-success,
.ns-doors-gp .badge.bg-success {
    background: var(--ns-gold) !important;
    border-color: var(--ns-gold) !important;
    color: var(--ns-on-accent) !important;
}

.ns-doors-gp a:not(.btn) { color: var(--ns-gold-light); }

.ns-doors-gp .rounded-3[style*="rgba(255,255,255,0.03)"] { background: var(--ns-surface) !important; }

@media (max-width: 575.98px) {
    .ns-doors-gp.container { padding-left: 16px; padding-right: 16px; }
    .ns-doors-gp .display-5 { font-size: 2rem; }
}

/* The ended and kept prospect preview: NetShow's own page, so the tokens replace the draft's palette. */
body.ns-doors-pp {
    --pp-bg: var(--ns-bg);
    --pp-fg: var(--ns-text);
    --pp-accent: var(--ns-gold-light);
    font-family: var(--ns-font);
}

body.ns-doors-pp .pp-stale { color: var(--ns-text-2); opacity: 1; }

body.ns-doors-pp .pp-keep {
    background: var(--ns-gold);
    color: var(--ns-on-accent);
}

/* The shipped proof line. */
.ns-doors-proof {
    font-family: var(--ns-font, inherit);
    color: var(--ns-text-2, inherit);
}

.ns-doors-proof a { color: var(--ns-gold-light, inherit); }

/* Doors slice 8: the shared ns-tokens.css palette; no independent theme. */
.ns-gp.ns-content-page,
.ns-gp .ns-content-hero,
.ns-gp .ns-content-body,
.ns-gp .ns-content-cta,
.ns-gp .ns-docs-shell {
    background: var(--ns-bg);
    color: var(--ns-text);
    font-family: var(--ns-font);
}
.ns-gp :is(.ns-content-card, .ns-help-find, .ns-help-more, .ns-docs-card) {
    background: var(--ns-card);
    color: var(--ns-text);
    border-color: var(--ns-border);
    border-radius: var(--ns-radius);
}
.ns-gp :is(.ns-content-hero, .ns-content-body, .ns-content-cta) :is(h1,h2,h3,h4,strong) { color: var(--ns-text); }
.ns-gp :is(.ns-content-hero, .ns-content-body, .ns-content-cta) p { color: var(--ns-text-2); }
.ns-gp :is(.ns-help-find__input, .ns-docs-search input) {
    background: var(--ns-surface); color: var(--ns-text); border-color: var(--ns-border-strong); font-size: 1rem;
}
.ns-gp :is(.ns-content-btn-primary, .ns-aie-btn-primary) { background: var(--ns-gold); color: var(--ns-on-accent); }
.ns-gp :is(.ns-content-btn-secondary, .ns-aie-btn-secondary) { background: var(--ns-surface); color: var(--ns-text); border-color: var(--ns-border-strong); }
.ns-gp .ns-aie-ctas .ns-content-btn-ghost { background: var(--ns-surface); color: var(--ns-text); border-color: var(--ns-border-strong); }
.ns-gp .landing-header { background: var(--ns-bg); border-color: var(--ns-border); }
.ns-gp .landing-header a { color: var(--ns-text); }
.ns-docs-shell.ns-gp {
    --ns-text-primary: var(--ns-text); --ns-text-secondary: var(--ns-text-2);
    --ns-bg-secondary: var(--ns-card); --ns-bg-surface: var(--ns-surface);
    background: var(--ns-bg); color: var(--ns-text); font-family: var(--ns-font);
}
.ns-docs-shell.ns-gp :is(.ns-docs-home-hero, .ns-docs-home-card, .ns-docs-home-link, .ns-docs-search, .ns-ai-intro) {
    background: var(--ns-card); color: var(--ns-text); border-color: var(--ns-border); box-shadow: none;
}
.ns-docs-shell.ns-gp :is(h1,h2,h3) { color: var(--ns-text) !important; }
.ns-docs-shell.ns-gp :is(p, .text-muted) { color: var(--ns-text-2) !important; }
/* The live door already hosts this page; the old static guide card is a duplicate host. */
.ns-docs-shell.ns-gp .ns-guide-presence--compact { display: none; }
.ns-gp :is(.ns-aie-hero, .ns-aie, .ns-aie-final) {
    --aie-ink: var(--ns-text); --aie-text: var(--ns-text); --aie-muted: var(--ns-text-2);
    --aie-accent: var(--ns-gold-light); --aie-card: var(--ns-card); --aie-line: var(--ns-border);
}
.ns-gp .ns-aie-face { border: 0; border-radius: 0; object-fit: contain; }
[data-door-live-hello="1"] .ns-door-voice-talk { display: none !important; }
[data-door-live-hello="1"] .ns-door-voice-menu { font-family: var(--ns-font, system-ui); }
.ns-gp :is(.ns-phone-card, .ns-avatar-menu-panel) {
    background: var(--ns-card); color: var(--ns-text); border-color: var(--ns-border); border-radius: var(--ns-radius);
}
.ns-gp :focus-visible { outline: 2px solid var(--ns-gold-light); outline-offset: 3px; }
@media (max-width: 480px) {
    .ns-gp .ns-content-container { padding-inline: 16px; }
    .ns-gp :is(.ns-help-find__input, .ns-docs-search input) { max-width: 100%; }
}

/* The existing host and its existing menu stay the only stage surface. */
.alive-dock[data-door-live-hello="1"] {
    background: transparent !important; border: 0 !important; box-shadow: none !important; border-radius: 0 !important;
}
[data-door-live-hello="1"] .ns-door-voice-menu > summary { font-size: 0; }
[data-door-live-hello="1"] .ns-door-voice-menu > summary span { font-size: 18px; }
@media (hover: hover) {
    [data-door-live-hello="1"] .ns-door-voice-menu:not([open]) { opacity: 0; }
    [data-door-live-hello="1"]:is(:hover, :focus-within) .ns-door-voice-menu { opacity: 1; }
}

/* Line 15808 (doors_stack_2026): the upskill-doors-9 doors read the same tokens. Each root carries
   .ns-gp .ns-doors26 only while its key is lit (App\Support\Door\DoorsStack2026::rootClass()); light by default,
   dark under prefers-color-scheme: dark. The page roots paint a full-bleed ground (border-image outset, never a
   sideways scroll), the same way the looks pages do. */
.ns-doors26 { --ns-focus: #1a73e8; font-family: var(--ns-font); }
@media (prefers-color-scheme: dark) { .ns-doors26 { --ns-focus: #8ab4f8; } }
.ns-doors26 :is(a, button, select, summary):focus-visible { outline: 2px solid var(--ns-focus); outline-offset: 2px; }
:is(.meet, .ns-es-tw).ns-doors26 {
    color: var(--ns-text);
    background: var(--ns-bg);
    border-image: conic-gradient(var(--ns-bg) 0 0) fill 0 / / 0 100vmax;
}

/* /meet and /meet/{anchor} (meet.partials.tokens) */
.meet.ns-doors26 {
    --meet-surface: var(--ns-card); --meet-surface-alt: var(--ns-surface);
    --meet-border: var(--ns-border); --meet-border-strong: var(--ns-border-strong);
    --meet-text: var(--ns-text); --meet-text-dim: var(--ns-text-2); --meet-text-mute: var(--ns-text-2);
    --meet-accent: var(--ns-gold-light); --meet-accent-glow: var(--ns-gold-glow);
}
.meet.ns-doors26 .meet__card:is(:hover, :focus-visible) {
    box-shadow: 0 1px 2px rgba(60, 64, 67, .3), 0 2px 6px 2px rgba(60, 64, 67, .15);
}

/* /es/sitios-web-que-hablan */
.ns-es-tw.ns-doors26 {
    --tw-ink: var(--ns-text); --tw-mute: var(--ns-text-2); --tw-gold: var(--ns-gold-light);
    --tw-line: var(--ns-border); --tw-card: var(--ns-card);
}
.ns-es-tw.ns-doors26 .ns-es-tw-btn--primary { background: var(--ns-gold); border-color: var(--ns-gold); color: var(--ns-on-accent); }
.ns-es-tw.ns-doors26 .ns-es-tw-frame { background: var(--ns-surface); }
.ns-es-tw.ns-doors26 .ns-es-tw-site i { background: var(--ns-border-strong); }
.ns-es-tw.ns-doors26 .ns-es-tw-mini-host span { background: var(--ns-card); }

/* The guide popout (components.netshow.guide-popout) reads the design-system names; point them at the tokens. */
#ns-guide-popout.ns-doors26 {
    --ns-bg-elevated: var(--ns-card); --ns-bg-surface: var(--ns-card);
    --ns-text-primary: var(--ns-text); --ns-text-muted: var(--ns-text-2);
    --ns-accent: var(--ns-gold); --ns-accent-subtle: var(--ns-gold-glow); --ns-accent-text: var(--ns-gold-light);
}
#ns-guide-popout.ns-doors26 :is(.ns-guide-pill, .ns-guide-panel) { box-shadow: 0 1px 3px rgba(60, 64, 67, .3), 0 4px 8px 3px rgba(60, 64, 67, .15); }
#ns-guide-popout.ns-doors26 :is(.ns-guide-send, .ns-guide-ptt.is-holding) { color: var(--ns-on-accent); }

/* The home talk door on /agent/{slug}: one calm accent button over any hero; its status line and language
   switch keep the hero's own colours so they stay readable on it. */
.agent-talk-door.ns-doors26 .agent-talk-door__btn {
    background: var(--ns-gold); color: var(--ns-on-accent); box-shadow: none; font-family: var(--ns-font);
}
.agent-talk-door.ns-doors26 .agent-talk-door__btn:hover { background: var(--ns-gold-deep); }
.agent-talk-door.ns-doors26 .ns-greet-lang__select { background: var(--ns-surface); color: var(--ns-text); border-color: var(--ns-border-strong); }

/* Line 15815 (upskill-doors-16, ai.features.upskill_doors_16): the doors a stranger walks through first (/stage-demo,
   /meet, /meet/{slug}, /talking-websites and its trade pages, /voice-demo, /p/live-shows). The page root carries
   class="ns-gp ns-doors" (App\Support\Marketing\DoorsUpskill16::rootClass), so the .ns-gp set of ns-tokens.css (light,
   dark by the device) is in scope; here each page's own palette names point at those tokens. No new colour. */
.ns-doors {
    /* design-system.css names: the stage demo, the voice demo, the meet tokens, the product shell */
    --ns-bg-primary: var(--ns-bg);
    --ns-bg-secondary: var(--ns-bg-deep);
    --ns-bg-tertiary: var(--ns-surface);
    --ns-bg-surface: var(--ns-surface);
    --ns-bg-card: var(--ns-card);
    --ns-bg-elevated: var(--ns-elevated);
    --ns-text-primary: var(--ns-text);
    --ns-text-secondary: var(--ns-text-2);
    --ns-text-muted: var(--ns-text-2);
    --ns-accent: var(--ns-gold-light);
    --ns-accent-hover: var(--ns-gold-deep);
    --ns-accent-subtle: var(--ns-gold-glow);
    --ns-accent-glow: var(--ns-gold-glow);
    --ns-accent-text: var(--ns-bg);
    --ns-border-subtle: var(--ns-border);
    --ns-font-body: var(--ns-font);
    /* the trade pages' own names */
    --ink: var(--ns-text);
    --muted: var(--ns-text-2);
    --blue: var(--ns-gold-light);
    --pale: var(--ns-surface);
    background-color: var(--ns-bg);
    color: var(--ns-text);
    font-family: var(--ns-font);
}
.ns-doors :is(h1, h2, h3) { font-family: var(--ns-font); }
.ns-doors :focus-visible { outline: 2px solid var(--ns-gold-light); outline-offset: 3px; }

/* /meet and /meet/{slug}: the buttons' dark ink reads on the dark accent only; the token pair reads in both schemes. */
.meet.ns-doors { background-color: var(--ns-bg); }
.meet.ns-doors :is(.meet__btn, .meet__btn:hover, .meet__btn:focus-visible) { color: var(--ns-accent-text); }
.meet.ns-doors .meet__card { background: var(--ns-card); border-color: var(--ns-border); }
.meet.ns-doors .meet-face-cap { color: var(--ns-text-2); }

/* /talking-websites: the page already reads the --ns-* names; it gains the ground. The drawn 'Your Business' page keeps
   its own paper colours: it is a picture of a customer's site. */
.tw.ns-doors { background-color: var(--ns-bg); }

/* /talking-websites/{trade}: the literal blues and whites of trade-pages.css. */
.ns-trade.ns-doors { background: var(--ns-bg); font-family: var(--ns-font); }
.ns-trade.ns-doors a:not(.ns-trade-button),
.ns-trade.ns-doors .ns-trade-link,
.ns-trade.ns-doors .ns-trade-price { color: var(--ns-gold-light); }
.ns-trade.ns-doors .ns-trade-button { background: var(--ns-gold); color: var(--ns-on-accent) !important; }
.ns-trade.ns-doors .ns-trade-button:hover { background: var(--ns-gold-deep); }
.ns-trade.ns-doors :is(.ns-trade-section, .ns-trade-moments li, .ns-trade-faq-item) { border-color: var(--ns-border); }
.ns-trade.ns-doors .ns-trade-site { background: var(--ns-card); border-color: var(--ns-border-strong); box-shadow: none; }
.ns-trade.ns-doors .ns-trade-site-bar { background: var(--ns-surface); border-color: var(--ns-border); }
.ns-trade.ns-doors :is(.ns-trade-site-intro, .ns-trade-spoken, .ns-trade-checks li, .ns-trade-question-list li, .ns-trade-desk) { background: var(--ns-surface); color: var(--ns-text); }
.ns-trade.ns-doors .ns-trade-package { background: var(--ns-surface); border-color: var(--ns-gold-border); }
.ns-trade.ns-doors .ns-trade-includes li { background: var(--ns-card); }
.ns-trade.ns-doors :is(.ns-trade-site-icon, .ns-trade-tag) { background: var(--ns-elevated); color: var(--ns-text); }
.ns-trade.ns-doors :is(.ns-trade-moments span, .ns-trade-site-dots) { color: var(--ns-text-2); }
.ns-trade.ns-doors .ns-trade-checks li::before { color: var(--ns-gold-light); }
.ns-trade.ns-doors .ns-trade-final { background: var(--ns-elevated); color: var(--ns-text); }
.ns-trade.ns-doors .ns-trade-final .ns-trade-link { color: var(--ns-gold-light); }

/* /voice-demo: its cards and transcript were drawn for a dark page only. */
.ns-doors--vd .vd-section-alt { background: var(--ns-bg-deep); }
.ns-doors--vd .vd-card { background: var(--ns-card); border-color: var(--ns-border); }
.ns-doors--vd .vd-card:hover { border-color: var(--ns-gold-border); }
.ns-doors--vd .vd-transcript { background: var(--ns-surface); border-color: var(--ns-border); color: var(--ns-text); }
.ns-doors--vd :is(.vd-phone-cta, .vd-phone-cta:hover, .vd-step-num) { color: var(--ns-accent-text); }

/* /p/live-shows: the product shell's hero and cards. */
.ns-doors--ls { padding-bottom: 24px; }
.ns-doors--ls :is(.ns-plp-btn-primary, .ns-plp-steps__num) { color: var(--ns-accent-text); }
