/* Line 15818 (upskill-looks-2): the Google path for the live-avatar stages and pages of this unit, loaded only while
   ai.features.looks_upskill_2 is on (partials/looks-upskill-2-google-path.blade.php, after css/ns-tokens.css).
   Three roots, one token set (ns-tokens.css): this sheet only points each page's OWN colour set at the --ns-* tokens.
     .ns-gp.ns-looks2       a page: light by default, dark under prefers-color-scheme: dark
                            (the pair-a-screen TV page, the Studio character catalog)
     .ns-gp-ag.ns-looks2    a signed-in desk inside layouts.app: follows the app's own theme switch (data-bs-theme)
                            (the embodiment workspace)
     .ns-looks2-stage       a stage that sits on the host's live face layer: Google's dark set in both schemes, because
                            its ground must match the face layer's own wrap and its caption scrims sit on her face
                            (the present door, the 3D stage, the Live Stage). It takes Google's ink, secondary grey,
                            lines, type and NetShow gold; the ground and the scrims stay.
   Each page root paints a full-bleed ground with a border-image outset (ink overflow: never a sideways scroll). */

.ns-looks2 {
    --ns-focus: #1a73e8;
    color: var(--ns-text);
    font-family: var(--ns-font);
}

@media (prefers-color-scheme: dark) {
    .ns-gp.ns-looks2 { --ns-focus: #8ab4f8; }
}
[data-bs-theme="dark"] .ns-gp-ag.ns-looks2 { --ns-focus: #8ab4f8; }

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

/* /alive/pair/tv — the screen shows a code the phone types. A TV never scrolls; the page keeps its one size ramp. */
body.ns-looks2.pair-tv {
    --ink: var(--ns-text);
    --ink-dim: var(--ns-text-2);
    --bg: var(--ns-bg);
    --panel: var(--ns-surface);
    --line: var(--ns-border-strong);
    --live: #188038;
    --warn: #b06000;
    --cut: #d93025;
    background: var(--ns-bg);
}
@media (prefers-color-scheme: dark) {
    body.ns-looks2.pair-tv { --live: #81c995; --warn: #fdd663; --cut: #f28b82; }
}

/* /marketplace/studio-characters, a character's page and /c/{slug} (marketplace.groundwork.layout) */
body.ns-looks2.groundwork {
    --ink: var(--ns-text);
    --dim: var(--ns-text-2);
    --panel: var(--ns-card);
    --line: var(--ns-border-strong);
    --accent: var(--ns-gold);
    color-scheme: light dark;
    background: var(--ns-bg);
}
body.ns-looks2.groundwork a { color: var(--ns-gold-light); }
body.ns-looks2.groundwork a:hover { color: var(--ns-text); }
body.ns-looks2.groundwork :is(.button, button) { color: var(--ns-on-accent); }
body.ns-looks2.groundwork button:disabled { color: var(--ns-text-2); }
body.ns-looks2.groundwork .card img { background: var(--ns-surface); }
body.ns-looks2.groundwork .stage { background: var(--ns-surface); }
body.ns-looks2.groundwork .eyebrow,
body.ns-looks2.groundwork .badge { color: var(--ns-gold-light); }

/* /dashboard/embodiment (inside layouts.app) */
.embodiment-page.ns-looks2 { color: var(--ns-text); }
.embodiment-page.ns-looks2 .panel {
    color: var(--ns-text);
    background: var(--ns-card);
    border-color: var(--ns-border);
    box-shadow: 0 1px 3px rgba(60, 64, 67, .16);
}
.embodiment-page.ns-looks2 :is(.eyebrow, .icon-wrap, .device-icon) { color: var(--ns-gold-light); }
.embodiment-page.ns-looks2 :is(.hero-title, .section-title, .feature-card h3, .feature-card h4, h1, h2, h3) { color: var(--ns-text); }
.embodiment-page.ns-looks2 :is(.muted-copy, .form-text, .text-muted) { color: var(--ns-text-2) !important; }
.embodiment-page.ns-looks2 :is(.signal-chip, .icon-wrap, .device-icon) {
    background: var(--ns-surface);
    border-color: var(--ns-border);
}
.embodiment-page.ns-looks2 .signal-chip { color: var(--ns-text); }
.embodiment-page.ns-looks2 :is(.feature-card, .status-note) {
    background: var(--ns-surface);
    border-color: var(--ns-border);
    color: var(--ns-text);
}
.embodiment-page.ns-looks2 textarea,
.embodiment-page.ns-looks2 textarea:focus {
    background-color: var(--ns-card);
    color: var(--ns-text);
    border-color: var(--ns-border-strong);
}
.embodiment-page.ns-looks2 textarea:focus { border-color: var(--ns-focus); box-shadow: 0 0 0 .2rem rgba(26, 115, 232, .18); }
.embodiment-page.ns-looks2 .btn-primary {
    background: var(--ns-gold);
    border-color: var(--ns-gold);
    color: var(--ns-on-accent);
}
/* F-0661 (fix-ui-05): the rest of the page's own dark set, so the light theme reads whole: Bootstrap's white text and
   info accents, the email field and the two selects, the deployment and device cards, the badges and the buttons. */
.embodiment-page.ns-looks2 .text-white { color: var(--ns-text) !important; }
.embodiment-page.ns-looks2 .text-info { color: var(--ns-gold-light) !important; }
.embodiment-page.ns-looks2 :is(.info-card, .device-card) {
    background: var(--ns-card);
    border-color: var(--ns-border);
    color: var(--ns-text);
}
.embodiment-page.ns-looks2 :is(.form-control, .form-select),
.embodiment-page.ns-looks2 :is(.form-control, .form-select):focus {
    background-color: var(--ns-card);
    color: var(--ns-text);
    border-color: var(--ns-border-strong);
}
.embodiment-page.ns-looks2 :is(.form-control, .form-select):focus { border-color: var(--ns-focus); box-shadow: 0 0 0 .2rem rgba(26, 115, 232, .18); }
.embodiment-page.ns-looks2 .badge.text-bg-dark {
    background: var(--ns-surface) !important;
    color: var(--ns-text) !important;
    border-color: var(--ns-border) !important;
}
.embodiment-page.ns-looks2 .btn-info {
    background: var(--ns-gold);
    border-color: var(--ns-gold);
    color: var(--ns-on-accent);
}
.embodiment-page.ns-looks2 :is(.btn-light, .btn-outline-light) {
    background: var(--ns-surface);
    border-color: var(--ns-border-strong);
    color: var(--ns-text);
}
.embodiment-page.ns-looks2 .btn-outline-info {
    background: transparent;
    border-color: var(--ns-gold-light);
    color: var(--ns-gold-light);
}
.embodiment-page.ns-looks2 :is(.btn-light, .btn-outline-light, .btn-outline-info):hover { background: var(--ns-elevated); color: var(--ns-text); }

/* The stages on the host's face layer: Google's dark set in both schemes. */
.ns-looks2-stage {
    --ns-bg: #202124;
    --ns-surface: #292a2d;
    --ns-card: #2d2e31;
    --ns-text: #e8eaed;
    --ns-text-2: #9aa0a6;
    --ns-gold: #f5a623;
    --ns-border: rgba(232, 234, 237, .12);
    --ns-border-strong: rgba(232, 234, 237, .2);
    --ns-on-accent: #202124;
    --ns-font: Roboto, 'Segoe UI', system-ui, -apple-system, Arial, sans-serif;
    color-scheme: dark;
}

/* /alive/{agent}/present and /alive/{agent}/present-3d: the ground (--pv-ground-*) is the face layer's own wrap and stays. */
body.pv.ns-looks2-stage {
    --pv-ink: var(--ns-text);
    --pv-dim: var(--ns-text-2);
    --pv-faint: #80868b;
    --pv-line: var(--ns-border-strong);
    --pv-amber: var(--ns-gold);
    --pv-teal: #81c995;
    --pv-blue: #8ab4f8;
    --pv-red: #f28b82;
    --pv-sans: var(--ns-font);
}

/* /multi-agent-dialogue/live-stage: the two hosts' stage. */
body.ns-looks2-stage.live-stage {
    --blue: var(--ns-gold);
    --cyan: #fdd663;
    --green: #81c995;
    --dark: var(--ns-bg);
    --border: var(--ns-border-strong);
    --text: var(--ns-text);
    --muted: var(--ns-text-2);
    /* Line 16073 (fix-voice-20, FRONTJS-0040): the sheet's literal greys now read these three. */
    --text-2: var(--ns-text-2);
    --text-soft: var(--ns-text);
    --text-strong: var(--ns-text);
    font-family: var(--ns-font);
}

/* FRONTJS-0040: surfaces, separators, status and accent tints inherit the stage token set. */
body.ns-looks2-stage.live-stage {
    --panel-bg: var(--ns-surface);
    --ls-surface: var(--ns-surface);
    --ls-line: var(--ns-border-strong);
    --ls-muted: var(--ns-text-2);
    --ls-highlight: color-mix(in srgb, var(--ns-text) 10%, transparent);
    --ls-success: var(--ns-speaking, #81c995);
    --ls-danger: var(--ns-error, #f28b82);
    --ls-accent-ink: var(--ns-gold-light);
    --ls-accent-0: color-mix(in srgb, var(--ns-gold) 0%, transparent);
    --ls-accent-40: color-mix(in srgb, var(--ns-gold) 4%, transparent);
    --ls-accent-50: color-mix(in srgb, var(--ns-gold) 5%, transparent);
    --ls-accent-60: color-mix(in srgb, var(--ns-gold) 6%, transparent);
    --ls-accent-70: color-mix(in srgb, var(--ns-gold) 7%, transparent);
    --ls-accent-80: color-mix(in srgb, var(--ns-gold) 8%, transparent);
    --ls-accent-100: color-mix(in srgb, var(--ns-gold) 10%, transparent);
    --ls-accent-120: color-mix(in srgb, var(--ns-gold) 12%, transparent);
    --ls-accent-150: color-mix(in srgb, var(--ns-gold) 15%, transparent);
    --ls-accent-160: color-mix(in srgb, var(--ns-gold) 16%, transparent);
    --ls-accent-180: color-mix(in srgb, var(--ns-gold) 18%, transparent);
    --ls-accent-200: color-mix(in srgb, var(--ns-gold) 20%, transparent);
    --ls-accent-220: color-mix(in srgb, var(--ns-gold) 22%, transparent);
    --ls-accent-250: color-mix(in srgb, var(--ns-gold) 25%, transparent);
    --ls-accent-280: color-mix(in srgb, var(--ns-gold) 28%, transparent);
    --ls-accent-300: color-mix(in srgb, var(--ns-gold) 30%, transparent);
    --ls-accent-350: color-mix(in srgb, var(--ns-gold) 35%, transparent);
    --ls-accent-400: color-mix(in srgb, var(--ns-gold) 40%, transparent);
    --ls-accent-450: color-mix(in srgb, var(--ns-gold) 45%, transparent);
    --ls-accent-500: color-mix(in srgb, var(--ns-gold) 50%, transparent);
    --ls-accent-550: color-mix(in srgb, var(--ns-gold) 55%, transparent);
    --ls-accent-600: color-mix(in srgb, var(--ns-gold) 60%, transparent);
    --ls-accent-650: color-mix(in srgb, var(--ns-gold) 65%, transparent);
    --ls-accent-700: color-mix(in srgb, var(--ns-gold) 70%, transparent);
    --ls-accent-750: color-mix(in srgb, var(--ns-gold) 75%, transparent);
    --ls-accent-800: color-mix(in srgb, var(--ns-gold) 80%, transparent);
    --ls-accent-850: color-mix(in srgb, var(--ns-gold) 85%, transparent);
    --ls-accent-900: color-mix(in srgb, var(--ns-gold) 90%, transparent);
}