/* Line 15830 (upskill-looks-14-r1): the Google path for the live-avatar PAGES (their grounds and colour sets; line 15829's
   css/looks-google-path.css dresses the avatar menu, stage adapter and trust band on top), loaded only while
   ai.features.looks_upskill_14 is on (partials/looks-google-path.blade.php, after css/ns-tokens.css).
   The page root carries class="ns-gp ns-looks14": .ns-gp is the canonical token set in ns-tokens.css (Google's surface
   greys, #202124 ink, #5f6368 secondary, NetShow gold; light by default, dark under prefers-color-scheme: dark). This
   sheet only points each page's OWN colour set at those tokens, so no page brings a second look:
     --lap-*  /live-avatars and /es/avatares-en-vivo (marketing.partials.live-avatars-style)
     --dmo-*  /demos (marketing.partials.demos-style)
     --hire-* /talking-signs (marketing.hire.partials.style)
     --aie-*  /es/empleados-ia (css/pages/ai-employees.css)
     --iv-*   the inline colours of /industries/* and /screens (each with main's colour as its fallback)
   plus the expression lab's and the avatars shelf's literal colours. The host's own frame (her portrait stage, the
   caption scrims on her face) keeps its dark ground in both schemes: it sits on her face.
   Each root paints a full-bleed ground with a border-image outset, which is ink overflow: it never scrolls sideways. */

.ns-looks14 {
    --ns-gold-ink: var(--ns-gold-light, #b06000);
    --ns-focus: #1a73e8;
    color: var(--ns-text);
    font-family: var(--ns-font);
    background-color: var(--ns-bg);
    border-image: conic-gradient(var(--ns-bg) 0 0) fill 0 / / 0 100vmax;
}

@media (prefers-color-scheme: dark) {
    .ns-looks14 { --ns-focus: #8ab4f8; }
}

.ns-looks14 a:focus-visible,
.ns-looks14 button:focus-visible,
.ns-looks14 input:focus-visible,
.ns-looks14 select:focus-visible {
    outline: 2px solid var(--ns-focus);
    outline-offset: 2px;
}

/* /live-avatars and /es/avatares-en-vivo */
.lap.ns-looks14 {
    --lap-bg: var(--ns-bg);
    --lap-card: var(--ns-card);
    --lap-text: var(--ns-text);
    --lap-text-2: var(--ns-text-2);
    --lap-gold: var(--ns-gold-ink);
    --lap-line: var(--ns-border-strong);
    font-family: var(--ns-font);
}
.lap.ns-looks14 :is(.lap-btn-primary, .lap-step-n) { background: var(--ns-gold); border-color: var(--ns-gold); color: var(--ns-on-accent) !important; }

/* /demos */
.dmo.ns-looks14 {
    --dmo-card: var(--ns-card);
    --dmo-text: var(--ns-text);
    --dmo-text-2: var(--ns-text-2);
    --dmo-gold: var(--ns-gold-ink);
    --dmo-line: var(--ns-border-strong);
    font-family: var(--ns-font);
}
.dmo.ns-looks14 .dmo-btn-primary { background: var(--ns-gold); border-color: var(--ns-gold); color: var(--ns-on-accent) !important; }

/* /talking-signs */
.ns-hire.ns-looks14 {
    --hire-bg: var(--ns-bg);
    --hire-panel: var(--ns-surface);
    --hire-line: var(--ns-border-strong);
    --hire-text: var(--ns-text);
    --hire-soft: var(--ns-text-2);
    --hire-accent: var(--ns-gold);
    --hire-accent-ink: var(--ns-on-accent);
    font-family: var(--ns-font);
}

/* The hire sheet writes its headings and figures in literal white. */
.ns-hire.ns-looks14 :is(h1, h2, h3, .ns-hire__label, .ns-hire__still-state, .ns-hire__opener, .ns-hire__trade, .ns-hire__price-figure, .ns-hire__card-price, .ns-hire__top-price, .ns-signs__ai-line) { color: var(--ns-text); }

/* /es/empleados-ia */
.ns-aie.ns-looks14,
.ns-aie.ns-looks14 :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-ink);
    --aie-card: var(--ns-surface);
    --aie-line: var(--ns-border-strong);
}
.ns-aie.ns-looks14 :is(h1, h2, h3) { color: var(--ns-text); }
.ns-aie.ns-looks14 a:not(.ns-aie-btn):not(.ns-aie-job-cta) { color: var(--ns-gold-ink); }
.ns-aie.ns-looks14 :is(.ns-aie-job-cta, .ns-aie-btn) { color: var(--ns-text); border-color: var(--ns-border-strong); }

/* /industries/* and /screens: the inline colours read --iv-* with main's colours as fallbacks. */
.ns-looks14 {
    --iv-bg: var(--ns-bg);
    --iv-band: var(--ns-bg-deep);
    --iv-card: var(--ns-card);
    --iv-panel: var(--ns-surface);
    --iv-panel-2: var(--ns-surface);
    --iv-line: var(--ns-border-strong);
    --iv-line-2: var(--ns-border);
    --iv-ink: var(--ns-text);
    --iv-ink-2: var(--ns-text);
    --iv-text: var(--ns-text);
    --iv-text-2: var(--ns-text-2);
    --iv-muted: var(--ns-text-2);
    --iv-link: var(--ns-focus);
    --iv-accent: var(--ns-gold-ink);
}
.ns-industry-page.ns-looks14 section { background-image: none !important; }
.ns-industry-page.ns-looks14 .ns-industry-host img { background: var(--ns-surface); }

/* /screens (layouts.content draws the hero and the call to action; their own rules are dark literals) */
.screens-hero.ns-looks14 h1,
.ns-content-cta.ns-looks14 h2,
.screens-section.ns-looks14 :is(h2, h3) { color: var(--ns-text); }
.screens-hero.ns-looks14 p,
.ns-content-cta.ns-looks14 p { color: var(--ns-text-2); }
.screens-hero.ns-looks14::before { display: none; }
.screens-hero.ns-looks14 .screens-eyebrow { color: var(--ns-gold-ink); }
.screens-section.ns-looks14 .screens-card { background: var(--ns-card); border-color: var(--ns-border-strong); }
.screens-section.ns-looks14 :is(.screens-card p, .screens-list) { color: var(--ns-text-2); }
.screens-section.ns-looks14 .screens-note { color: var(--ns-text); border-left-color: var(--ns-gold); background: var(--ns-surface); }
.ns-looks14 .ns-content-btn-primary { color: var(--ns-on-accent); }

/* /live-avatars/expressions: the lab's white cards sat on the dark layout with its title in dark ink (unreadable). */
.expression-lab.ns-looks14 { color: var(--ns-text); }
.expression-lab.ns-looks14 :is(.expression-lab__title, .expression-lab__h2, .expression-lab__lead) { color: var(--ns-text); }
.expression-lab.ns-looks14 .expression-lab__nav a { color: var(--ns-gold-ink); }
.expression-lab.ns-looks14 :is(.expression-lab__stage-wrap, .expression-lab__controls) { background: var(--ns-card); border-color: var(--ns-border-strong); color: var(--ns-text); }
.expression-lab.ns-looks14 :is(.expression-lab__state-note, .expression-lab__controls label, .expression-lab__mode legend) { color: var(--ns-text-2); }
.expression-lab.ns-looks14 :is(.expression-lab__features button, .expression-lab__secondary) { background: var(--ns-surface); border-color: var(--ns-border-strong); color: var(--ns-text); }
.expression-lab.ns-looks14 .expression-lab__features button[aria-pressed="true"],
.expression-lab.ns-looks14 .expression-lab__primary { background: var(--ns-gold); border-color: var(--ns-gold); color: var(--ns-on-accent); }
.expression-lab.ns-looks14 input { accent-color: var(--ns-gold); }

/* /marketplace/agents/avatars (the shelf and its cards; the words over a card's photo keep their dark scrim) */
.marketplace-container.ns-looks14 { background-color: var(--ns-bg); }
.marketplace-container.ns-looks14 h1 { color: var(--ns-text); }
.marketplace-container.ns-looks14 h1 + p,
.marketplace-container.ns-looks14 :is(.mp-card-desc, .mp-card-tag) { color: var(--ns-text-2); }
/* Line 16068 (F-0861): the subtitle and shelf count also wear Bootstrap's .text-muted, which is !important; the token wins here. */
.marketplace-container.ns-looks14 :is(h1 + p, [data-shelf-total]).text-muted { color: var(--ns-text-2) !important; }
.marketplace-container.ns-looks14 :is(.mp-tab, .mp-search-bar, .mp-category-select, .mp-view-btn, .mp-btn-try, .mp-btn-owned, .mp-card-tag, .mp-card-price.mp-free) {
    background: var(--ns-surface);
    border-color: var(--ns-border-strong);
    color: var(--ns-text);
}
.marketplace-container.ns-looks14 .mp-search-bar input { color: var(--ns-text); }
.marketplace-container.ns-looks14 .mp-tab.active { background: var(--ns-gold); border-color: var(--ns-gold); color: var(--ns-on-accent); }
.marketplace-container.ns-looks14 .mp-card { background: var(--ns-card); border-color: var(--ns-border-strong); }
.marketplace-container.ns-looks14 .mp-tabs { border-bottom-color: var(--ns-border); }

/* The ground between the page's own blocks (the layout's padding bands) follows the same scheme, so no dark strip sits
   between two light blocks. Only on a page that carries the class; the top menu and the footer keep their own look. */
body:has(.ns-looks14) { --ns-looks14-ground: #ffffff; }
@media (prefers-color-scheme: dark) {
    body:has(.ns-looks14) { --ns-looks14-ground: #202124; }
}
body:has(.ns-looks14) :is(.ns-content-body, .ns-main):has(.ns-looks14) { background: var(--ns-looks14-ground); }
body:has(.ns-looks14) :is(.ns-content-body, .ns-main):has(.ns-looks14)::before { display: none; }