/* Studio on the Google path, part 5 (line 15866, upskill-studio-5; line 15862 owns css/pages/studio-google-path.css). Linked by studio.partials.google-path, after css/ns-tokens.css,
   only while ai.features.studio_upskill_5 is on (App\Support\Studio\StudioUpskill5::enabled()); a lit page adds
   StudioUpskill5::rootClass() (" ns-gp-ag ns-studio5") to its own root, so every rule is scoped under .ns-studio5.
   ns-tokens.css gives .ns-gp-ag the canonical --ns-* sets (#202124 ink, #5f6368 secondary, Google surface greys,
   NetShow gold) and follows the app's theme switch: light, and dark under [data-bs-theme="dark"]. This sheet only adds
   the focus and error tokens that set lacks and points each page's own colours at the tokens; it brings no second look.
   Pages: the Sketch studio (.sketch-studio), the agent editor (.ea-edit-agent) and the
   animation credits list (.ns-anim-credits); My moves is line 15862's. Calm surfaces, Google type, 44 px targets, nothing wider than 375 px. */

.ns-studio5 {
    --ns-focus: #1a73e8;
    --ns-danger: #d93025;
    --ns-gold-soft: rgba(249, 171, 0, .14);
    font-family: var(--ns-font);
    color: var(--ns-text);
    background: var(--ns-bg);
    border-radius: var(--ns-radius);
    padding-inline: clamp(12px, 4vw, 24px);
    min-width: 0;
    overflow-wrap: anywhere;
}

[data-bs-theme="dark"] .ns-studio5 {
    --ns-focus: #8ab4f8;
    --ns-danger: #f28b82;
    --ns-gold-soft: rgba(245, 166, 35, .16);
}

.ns-studio5 :is(h1, h2, h3, h4, h5, label, dt) { color: var(--ns-text); font-family: var(--ns-font); }

/* Panels and cards. */
.ns-studio5 :is(.card, [class*="__panel"], [class*="__card"], .ns-content-card) {
    background: var(--ns-card);
    color: var(--ns-text);
    border: 1px solid var(--ns-border);
    border-radius: var(--ns-radius);
    box-shadow: none;
}

/* Secondary words. */
.ns-studio5 :is(p, .text-muted, small, dd, .form-text, [class*="__hint"], [class*="__lead"], [class*="__note"]) {
    color: var(--ns-text-2);
}

/* Fields: one height, one border, a visible focus ring. */
.ns-studio5 :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]), select, textarea) {
    background: var(--ns-bg);
    color: var(--ns-text);
    border: 1px solid var(--ns-border-strong);
    border-radius: 8px;
    min-height: 44px;
    font-family: var(--ns-font);
}
.ns-studio5 :is(input, select, textarea, button, a):focus-visible {
    outline: 2px solid var(--ns-focus);
    outline-offset: 2px;
}

/* Buttons: quiet by default, one gold primary. */
.ns-studio5 :is(button, .ns-btn, .btn):not([role="tab"]):not(.btn-close) {
    min-height: 44px;
    border-radius: 999px;
    border: 1px solid var(--ns-border-strong);
    background: var(--ns-surface);
    color: var(--ns-text);
    font-family: var(--ns-font);
    font-weight: 500;
}
.ns-studio5 :is(.btn-primary, .ns-btn-primary, .ns-btn--primary, [class*="__primary"], button[type="submit"]) {
    background: var(--ns-gold);
    border-color: var(--ns-gold);
    color: var(--ns-on-accent);
}
.ns-studio5 :is(button, .btn)[aria-pressed="true"] {
    background: var(--ns-gold-soft);
    border-color: var(--ns-gold);
}
.ns-studio5 :is(button, .btn):disabled { opacity: .5; }

/* Links and errors. */
.ns-studio5 a:not(.btn):not(.ns-btn) { color: var(--ns-gold-light); }
.ns-studio5 :is([data-error], .text-danger, [class*="__error"], .is-refused) { color: var(--ns-danger); }

/* The drawing stage stays neutral so a live look reads on it in both themes. */
.ns-studio5 :is([class*="__stage"], [class*="__drawing"], [data-stage]) {
    background: var(--ns-surface);
    border-radius: var(--ns-radius);
}

/* The animation credits list: one card per source. */
ul.ns-studio5.ns-anim-credits { background: transparent; padding-inline: 0; }
.ns-studio5.ns-anim-credits > li { padding: 16px; }
.ns-studio5.ns-anim-credits h2 { color: var(--ns-text); }
.ns-studio5.ns-anim-credits p { color: var(--ns-text-2); }
.ns-studio5.ns-anim-credits a { color: var(--ns-gold-light); }

@media (max-width: 480px) {
    .ns-studio5 { padding-inline: 12px; border-radius: 0; }
    .ns-studio5 :is(select, input, textarea) { max-width: 100%; }
}