/* Line 16004 (google-path-studio-r1, ai.features.google_path_studio): the Studio pages lines 15862 and 15866 had not
   moved, on the Google path. Linked by App\Support\Studio\GooglePathStudio::styles() only while the key is on, after
   css/ns-tokens.css and after each page's own style; a lit page root adds GooglePathStudio::rootClass(), so every rule
   here is scoped under .ns-gp-studio and no other page can change.
   The colours are ns-tokens.css's sets, never a literal of this sheet: the public pages (the /studio front door, the
   /studio/test-drive hub) take .ns-gp, light by default and dark under prefers-color-scheme: dark; the owner pages
   (Start in three steps, the Character factory) take .ns-gp-ag, which follows the app's theme switch.
   This sheet adds one type scale (Roboto, the ns-tokens font), maps the older names the pages read (the app design
   system's --ns-bg-primary / --ns-text-primary / --ns-accent family and the ui-kit's --nsk-* roles) onto the tokens,
   and keeps one filled button per page: the other calls to action read as quiet text buttons. Accent text reads
   --ns-gold-light (4.5:1 on either surface); a filled button reads --ns-gold with --ns-on-accent ink.
   Stage frames that hold a live face keep their own dark art; layout, copy, links and sizes are the pages' own. */

.ns-gp-studio {
    --gps-h1: clamp(1.75rem, 1.35rem + 1.8vw, 2.75rem);
    --gps-h2: clamp(1.375rem, 1.2rem + .8vw, 1.75rem);
    --gps-h3: 1.125rem;
    --gps-body: 1rem;
    --gps-small: .875rem;
    --gps-caption: .75rem;
    --gps-leading: 1.5;
    --gps-glow: var(--ns-gold-glow, rgba(249, 171, 0, .22));
    --gps-shadow: 0 1px 2px rgba(60, 64, 67, .3), 0 1px 3px 1px rgba(60, 64, 67, .15);

    /* The app design system's names, read by the test drive hub, Start in three steps and the Character factory. */
    --ns-bg-primary: var(--ns-bg);
    --ns-bg-secondary: var(--ns-card);
    --ns-bg-tertiary: var(--ns-surface);
    --ns-bg-surface: 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-text: var(--ns-on-accent);
    --ns-border-subtle: var(--ns-border);

    background: var(--ns-bg);
    color: var(--ns-text);
    font-family: var(--ns-font);
    font-size: var(--gps-body);
    line-height: var(--gps-leading);
    -webkit-font-smoothing: antialiased;
}

/* The ui-kit roles (the front door sets data-nsk-scope="app" on its own root and inside it). */
.ns-gp-studio[data-nsk-scope],
.ns-gp-studio [data-nsk-scope],
.ns-gp-studio-chrome .landing-header [data-nsk-scope] {
    --nsk-bg: var(--ns-bg);
    --nsk-band: var(--ns-bg-deep);
    --nsk-surface: var(--ns-card);
    --nsk-surface-2: var(--ns-surface);
    --nsk-inset: var(--ns-surface);
    --nsk-float: var(--ns-elevated);
    --nsk-chip-bg: var(--ns-surface);
    --nsk-header: var(--ns-bg);
    --nsk-ink: var(--ns-text);
    --nsk-text: var(--ns-text);
    --nsk-sub: var(--ns-text-2);
    --nsk-faint: var(--ns-text-2);
    --nsk-accent: var(--ns-gold-light);
    --nsk-accent-hover: var(--ns-gold-deep);
    --nsk-accent-subtle: var(--gps-glow);
    --nsk-on-accent: var(--ns-on-accent);
    --nsk-accent-2: var(--ns-text);
    --nsk-bd: var(--ns-border-strong);
    --nsk-bd-soft: var(--ns-border);
    --nsk-bd-strong: var(--ns-border-strong);
    --nsk-focus: var(--ns-gold-light);
    --nsk-font-display: var(--ns-font);
    --nsk-font-body: var(--ns-font);
    --nsk-font-mono: var(--ns-font);
    --nsk-shadow-sm: var(--gps-shadow);
    --nsk-shadow-md: var(--gps-shadow);
    --nsk-shadow-lg: var(--gps-shadow);
    --nsk-shadow-pop: var(--gps-shadow);
    --nsk-radius-lg: var(--ns-radius);
    --nsk-radius-xl: var(--ns-radius);
    --nsk-radius-hero: var(--ns-radius);
    --nsk-label-tracking: .08em;
    --nsk-label-weight: 500;
}

/* One type scale: headings at 400/500, no negative tracking, body 16 px, secondary text 14 px. */
.ns-gp-studio :is(h1, h2, h3) { color: var(--ns-text); font-family: var(--ns-font); letter-spacing: 0; }
.ns-gp-studio h1 { font-size: var(--gps-h1); font-weight: 400; line-height: 1.2; }
.ns-gp-studio h2 { font-size: var(--gps-h2); font-weight: 400; line-height: 1.3; }
.ns-gp-studio h3 { font-size: var(--gps-h3); font-weight: 500; line-height: 1.35; }
.ns-gp-studio a { color: var(--ns-gold-light); text-underline-offset: 3px; }
.ns-gp-studio :focus-visible { outline: 2px solid var(--ns-gold-light); outline-offset: 2px; }
.ns-gp-studio table { font-variant-numeric: tabular-nums; border-collapse: collapse; }
.ns-gp-studio :is(th, td) { border-bottom: 1px solid var(--ns-border); padding: 8px 12px; }
.ns-gp-studio :is(input:not([type=checkbox]):not([type=radio]):not([type=range]), select, textarea) {
    background: var(--ns-card);
    color: var(--ns-text);
    border: 1px solid var(--ns-border-strong);
    border-radius: 8px;
    font: inherit;
}

/* ── The Studio front door (/studio). ────────────────────────────────────────────────────────────────────────── */
.ns-gp-studio.studio-door .hero { --nsk-font-display: var(--ns-font); --nsk-font-body: var(--ns-font); font-family: var(--ns-font); }
.ns-gp-studio.studio-door .hero h1 { font-size: var(--gps-h1); font-weight: 400; letter-spacing: 0; color: var(--ns-text); }
.ns-gp-studio.studio-door .hero h1 em { color: var(--ns-gold-light); }
.ns-gp-studio.studio-door .hero-sub { font-size: 1.125rem; color: var(--ns-text-2); }
.ns-gp-studio.studio-door .hero-truth strong { color: var(--ns-text); font-weight: 500; }
.ns-gp-studio.studio-door :is(.band-head h2, .plans-inner h2) { font-size: var(--gps-h2); font-weight: 400; }
.ns-gp-studio.studio-door :is(.door-title, .pillar h3, .road-body h3, .ladder-t) { font-weight: 500; }
.ns-gp-studio.studio-door .door-title { font-size: 1.25rem; }
.ns-gp-studio.studio-door :is(.nsk-kicker, .nsk-panel-title, .door-step, .ladder-k) {
    font-family: var(--ns-font);
    font-size: var(--gps-caption);
    font-weight: 500;
    letter-spacing: .08em;
}
.ns-gp-studio.studio-door :is(.door-step, .ladder-k) { color: var(--ns-gold-light); }
.ns-gp-studio.studio-door .nsk-chip { font-family: var(--ns-font); font-size: var(--gps-caption); letter-spacing: .02em; text-transform: none; }
.ns-gp-studio.studio-door .nsk-section-band { background: var(--ns-bg-deep); border-color: var(--ns-border); }
.ns-gp-studio.studio-door :is(.nsk-card, .nsk-panel, a.ladder-lead, a.ladder-rung) {
    background: var(--ns-card);
    border: 1px solid var(--ns-border);
    border-radius: var(--ns-radius);
    box-shadow: none;
}
.ns-gp-studio.studio-door :is(a.nsk-card, a.ladder-lead, a.ladder-rung):hover { border-color: var(--ns-border-strong); box-shadow: var(--gps-shadow); }
.ns-gp-studio.studio-door a.ladder-lead { border-color: var(--ns-border-strong); }
.ns-gp-studio.studio-door .road-num { font-family: var(--ns-font); background: var(--ns-surface); border-color: var(--ns-border); color: var(--ns-text); }

/* One filled button: the hero's primary. Every other call to action on the page reads as a quiet text button. */
.ns-gp-studio .nsk-cta { font-family: var(--ns-font); font-weight: 500; border-radius: 999px; }
.ns-gp-studio .nsk-cta-primary,
.ns-gp-studio .nsk-cta-primary:hover { background: var(--ns-gold); border-color: var(--ns-gold); color: var(--ns-on-accent); }
.ns-gp-studio .nsk-cta-primary:hover { box-shadow: var(--gps-shadow); }
.ns-gp-studio .nsk-cta-secondary,
.ns-gp-studio .nsk-cta-ghost {
    background: transparent;
    border-color: transparent;
    color: var(--ns-gold-light);
    padding-inline: 12px;
}
.ns-gp-studio .nsk-cta-secondary:hover,
.ns-gp-studio .nsk-cta-ghost:hover { background: var(--gps-glow); border-color: transparent; color: var(--ns-gold-light); }
.ns-gp-studio.studio-door .plans-inner .nsk-cta-secondary { padding-inline: 0; }

/* ── The test drive hub (/studio/test-drive). ────────────────────────────────────────────────────────────────── */
.ns-gp-studio.td-hub { max-width: none; padding-left: max(16px, calc((100% - 1120px) / 2)); padding-right: max(16px, calc((100% - 1120px) / 2)); }
.ns-gp-studio.td-hub .td-hub-lede { color: var(--ns-text-2); }
.ns-gp-studio.td-hub .td-family h2 { font-size: var(--gps-h2); font-weight: 400; }
.ns-gp-studio.td-hub .td-card { background: var(--ns-card); border-color: var(--ns-border); border-radius: var(--ns-radius); }
.ns-gp-studio.td-hub .td-card:hover { box-shadow: var(--gps-shadow); }
.ns-gp-studio.td-hub .td-body h3 { font-size: var(--gps-h3); font-weight: 500; }
.ns-gp-studio.td-hub .td-body p { color: var(--ns-text-2); font-size: var(--gps-small); }
.ns-gp-studio.td-hub .td-body .td-ai { font-size: var(--gps-caption); letter-spacing: .02em; }
.ns-gp-studio.td-hub .td-talk { color: var(--ns-gold-light); font-weight: 500; }
.ns-gp-studio.td-hub .td-talk:focus-visible { outline-color: var(--ns-gold-light); }
.ns-gp-studio.td-hub .td-soon { color: var(--ns-text-2); font-size: var(--gps-small); }

/* ── Start in three steps (/studio/start). ───────────────────────────────────────────────────────────────────── */
.ns-gp-studio.ns-tss { color: var(--ns-text); }
.ns-gp-studio.ns-tss .ns-tss__intro h1 { font-size: clamp(1.5rem, 1.25rem + 1vw, 2rem); font-weight: 400; }
.ns-gp-studio.ns-tss .ns-tss__title { font-size: 1.25rem; font-weight: 400; }
.ns-gp-studio.ns-tss .ns-tss__step { background: var(--ns-card); border-color: var(--ns-border); border-radius: var(--ns-radius); }
.ns-gp-studio.ns-tss .ns-tss__step--next { border: 2px solid var(--ns-gold); }
.ns-gp-studio.ns-tss .ns-tss__num { font-weight: 500; border-color: var(--ns-border-strong); color: var(--ns-text); }
.ns-gp-studio.ns-tss .ns-tss__step--next .ns-tss__num { border-color: var(--ns-gold); }
.ns-gp-studio.ns-tss .ns-tss__step--done .ns-tss__num,
.ns-gp-studio.ns-tss[data-one-screen] .ns-tss__step--done .ns-tss__row .ns-tss__num { background: var(--ns-gold); border-color: var(--ns-gold); color: var(--ns-on-accent); }
.ns-gp-studio.ns-tss .ns-tss__badge { font-weight: 500; }
.ns-gp-studio.ns-tss .ns-tss__step--next .ns-tss__badge { color: var(--ns-gold-light); }
.ns-gp-studio.ns-tss .ns-tss__btn { background: var(--ns-gold); color: var(--ns-on-accent); border-radius: 999px; font-weight: 500; }
.ns-gp-studio.ns-tss .ns-tss__link { color: var(--ns-gold-light); }
.ns-gp-studio.ns-tss .ns-tss__face { border-color: var(--ns-gold); background: var(--ns-surface); }
.ns-gp-studio.ns-tss .ns-tss__switch { border-color: var(--ns-border-strong); color: var(--ns-text); }
.ns-gp-studio.ns-tss .ns-tss__track { background: var(--ns-border-strong); }
.ns-gp-studio.ns-tss .ns-tss__switch[aria-checked="true"] .ns-tss__track { background: var(--ns-gold); }
.ns-gp-studio.ns-tss .ns-tss__switch[aria-checked="true"] .ns-tss__track::after { background: var(--ns-on-accent); }
.ns-gp-studio.ns-tss .ns-tss__status { border-color: var(--ns-gold); background: var(--ns-surface); border-radius: var(--ns-radius); }
.ns-gp-studio.ns-tss :is(.ns-tss__look, .ns-tss__input, .ns-tss__select, .ns-tss__text) { border-color: var(--ns-border-strong); }
.ns-gp-studio.ns-tss .ns-tss__look--wearing { border-color: var(--ns-gold); box-shadow: 0 0 0 1px var(--ns-gold); }
.ns-gp-studio.ns-tss .ns-tss__snippet { background: var(--ns-surface); color: var(--ns-text); }
.ns-gp-studio.ns-tss .ns-tss__progress-track { background: var(--ns-border); }
.ns-gp-studio.ns-tss .ns-tss__progress-fill { background: var(--ns-gold); }
.ns-gp-studio.ns-tss .ns-tss__change { border-color: var(--ns-border-strong); color: var(--ns-gold-light); font-weight: 500; }
.ns-gp-studio.ns-tss .ns-tss__fold[open] .ns-tss__change { background: var(--ns-gold); border-color: var(--ns-gold); color: var(--ns-on-accent); }

/* ── The Character factory (/dashboard/agents/{id}/studio/character-factory). ───────────────────────────────── */
.ns-gp-studio.cf .cf-kicker { font-size: var(--gps-caption); font-weight: 500; letter-spacing: .08em; color: var(--ns-text-2); }
.ns-gp-studio.cf .cf-title { font-size: clamp(1.5rem, 1.25rem + 1vw, 2rem); font-weight: 400; }
.ns-gp-studio.cf :is(.cf-lede, .cf-hint, .cf-look-why) { color: var(--ns-text-2); }
.ns-gp-studio.cf .cf-card { background: var(--ns-card); border-color: var(--ns-border); border-radius: var(--ns-radius); }
.ns-gp-studio.cf .cf-h2 { font-size: var(--gps-h3); font-weight: 500; }
.ns-gp-studio.cf .cf-look { border-top-color: var(--ns-border); }
.ns-gp-studio.cf .cf-look-name { font-weight: 500; }
.ns-gp-studio.cf :is(.btn, .form-select) { font-family: var(--ns-font); }
.ns-gp-studio.cf .form-select { background-color: var(--ns-card); color: var(--ns-text); border-color: var(--ns-border-strong); }
.ns-gp-studio.cf .form-label { color: var(--ns-text); font-weight: 500; }
.ns-gp-studio.cf :is(.btn-primary, .btn-success) { background: var(--ns-gold); border-color: var(--ns-gold); color: var(--ns-on-accent); border-radius: 999px; font-weight: 500; }
.ns-gp-studio.cf :is(.btn-primary, .btn-success):hover { background: var(--ns-gold-deep); border-color: var(--ns-gold-deep); color: var(--ns-on-accent); }
.ns-gp-studio.cf .btn-outline-secondary { background: transparent; border-color: var(--ns-border-strong); color: var(--ns-gold-light); border-radius: 999px; font-weight: 500; }
.ns-gp-studio.cf .btn-outline-secondary:hover { background: var(--gps-glow); color: var(--ns-gold-light); }
.ns-gp-studio.cf .cf-look-actions .btn-primary { background: transparent; border-color: var(--ns-border-strong); color: var(--ns-gold-light); }
.ns-gp-studio.cf .cf-look-actions .btn-primary:hover { background: var(--gps-glow); color: var(--ns-gold-light); }
.ns-gp-studio.cf .cf-btn { display: inline-flex; align-items: center; justify-content: center; }

/* ── Line 16104 (fix-studio-01-20260929-r1, ai.features.fix_studio_01): the layouts.landing chrome around the lit /studio
   front door and /studio/test-drive hub. FixStudio01::chromeBodyClass() puts .ns-gp .ns-gp-studio-chrome on <body>, so the
   page ground, the old landing header and footer (landing_top_menu off) follow the device like the page between them;
   with landing_top_menu on, <html data-ns-tokens> dresses the one top menu and footer index from css/ns-tokens.css. ── */
body.ns-gp-studio-chrome { background: var(--ns-bg); color: var(--ns-text); font-family: var(--ns-font); }
.ns-gp-studio-chrome .landing-bg { background: none; }
.ns-gp-studio-chrome :is(.landing-header, .landing-footer) { background: var(--ns-bg-deep) !important; color: var(--ns-text); border-color: var(--ns-border); }
.ns-gp-studio-chrome :is(.landing-brand, .landing-link-btn) { color: var(--ns-text); }
.ns-gp-studio-chrome .landing-brand-dot { background: var(--ns-gold); box-shadow: none; }
.ns-gp-studio-chrome .landing-footer :is(a, p, div) { color: var(--ns-text-2) !important; }
.ns-gp-studio-chrome .landing-footer a:hover { color: var(--ns-gold-light) !important; }

/* H-0070: the live label inherited the UI kit green intended for a dark ground. */
.ns-gp-studio.studio-door .nsk-chip-live { color: var(--ns-text); background: var(--ns-surface); }