/* Body planes for the polish 5 pages. They live here, not in css/ns-tokens.css (the shared token file every page order
   touches), and carry the same two Google-path sets ns-tokens.css gives .ns-gp (system scheme) and .ns-gp-ag (the app's
   data-bs-theme switch), so the plane around each page matches the page. This sheet loads only on these pages. */
body:has(.bft.ns-polish-5),
html:has(style[data-ns-polish-5-host]) body,
body:has(.ns-polish-5.ns-gp-ag) {
    --ns-bg: #ffffff;
    --ns-bg-deep: #f8f9fa;
    --ns-surface: #f1f3f4;
    --ns-elevated: #e8eaed;
    --ns-card: #ffffff;
    --ns-text: #202124;
    --ns-text-2: #5f6368;
    --ns-gold: #f9ab00;
    --ns-gold-light: #b06000;
    --ns-gold-deep: #e37400;
    --ns-border: rgba(60, 64, 67, .14);
    --ns-border-strong: rgba(60, 64, 67, .26);
    --ns-on-accent: #202124;
    --ns-font: Roboto, 'Segoe UI', system-ui, -apple-system, Arial, sans-serif;
    --ns-radius: 12px;
    color-scheme: light;
}
@media (prefers-color-scheme: dark) {
    body:has(.bft.ns-polish-5),
    html:has(style[data-ns-polish-5-host]) body {
        --ns-bg: #202124;
        --ns-bg-deep: #1b1c1f;
        --ns-surface: #292a2d;
        --ns-elevated: #35363a;
        --ns-card: #2d2e31;
        --ns-text: #e8eaed;
        --ns-text-2: #9aa0a6;
        --ns-gold: #f5a623;
        --ns-gold-light: #fdd663;
        --ns-gold-deep: #c7851a;
        --ns-border: rgba(232, 234, 237, .12);
        --ns-border-strong: rgba(232, 234, 237, .2);
        --ns-on-accent: #202124;
        color-scheme: dark;
    }
}
[data-bs-theme="dark"] body:has(.ns-polish-5.ns-gp-ag) {
    --ns-bg: #202124;
    --ns-bg-deep: #1b1c1f;
    --ns-surface: #292a2d;
    --ns-elevated: #35363a;
    --ns-card: #2d2e31;
    --ns-text: #e8eaed;
    --ns-text-2: #9aa0a6;
    --ns-gold: #f5a623;
    --ns-gold-light: #fdd663;
    --ns-gold-deep: #c7851a;
    --ns-border: rgba(232, 234, 237, .12);
    --ns-border-strong: rgba(232, 234, 237, .2);
    --ns-on-accent: #202124;
    color-scheme: dark;
}

/* Reconnect page chrome to the canonical ns-gp, ns-gp-ag and ns-gp-stage scopes. */
.ns-polish-5,
body:has(.ns-polish-5.ns-gp-ag),
html:has(style[data-ns-polish-5-host]) body {
    --main-card-header: none;
    --main-card-body: var(--ns-card);
    --sub-card-body-bg-color: var(--ns-card);
    --sub-card-body-shadow: none;
    --cc-v2-page-bg: var(--ns-bg);
    --cc-v2-card-bg: var(--ns-card);
    --cc-v2-input-bg: var(--ns-card);
    --cc-v2-border: var(--ns-border-strong);
    --cc-v2-text: var(--ns-text);
    --cc-v2-muted: var(--ns-text-2);
    --cc-v2-accent: var(--ns-gold);
    --cc-v2-accent-soft: var(--ns-surface);
    --ns-bg-primary: var(--ns-bg);
    --ns-bg-secondary: var(--ns-card);
    --ns-bg-tertiary: var(--ns-surface);
    --ns-bg-elevated: var(--ns-elevated);
    --ns-bg-surface: var(--ns-card);
    --ns-text-primary: var(--ns-text);
    --ns-text-secondary: var(--ns-text-2);
    --ns-text-muted: var(--ns-text-2);
    --ns-border-subtle: var(--ns-border);
    --ns-accent: var(--ns-gold);
    --ns-accent-text: var(--ns-on-accent);
    --ns-error: var(--ns-text);
    --bs-body-bg: var(--ns-bg);
    --bs-body-color: var(--ns-text);
    --bs-secondary-color: var(--ns-text-2);
    --bs-border-color: var(--ns-border);
    font-family: var(--ns-font);
    color: var(--ns-text);
    background-color: var(--ns-bg);
    min-width: 0;
}
.ns-polish-5 :focus-visible { outline: 2px solid var(--ns-text); outline-offset: 3px; }
.ns-polish-5.ai-playground-create-voice-page {
    --pg-bg: var(--ns-bg);
    --pg-card: var(--ns-card);
    --pg-card-header: var(--ns-surface);
    --pg-input: var(--ns-card);
    --pg-border: var(--ns-border-strong);
    --pg-text: var(--ns-text);
    --pg-text-muted: var(--ns-text-2);
    --pg-accent: var(--ns-gold);
    --pg-accent-hover: var(--ns-gold);
}
body:has(.ns-polish-5.ns-gp-ag) { background: var(--ns-bg) !important; color: var(--ns-text) !important; }
.ns-polish-5 :is(.card, .card-header, .card-body, .row-mainn, .resizable-div, .modal-content) { box-shadow: none; background-image: none; }
.ns-polish-5 :is(.row-mainn, .resizable-div) { background: var(--ns-card); color: var(--ns-text); border-color: var(--ns-border-strong); }
.ns-polish-5 :is(h1, h2, h3, h4, h5, h6, p, label, button, input, textarea, select) { font-family: var(--ns-font); }
.ns-polish-5 table { --bs-table-bg: var(--ns-card); --bs-table-color: var(--ns-text); --bs-table-border-color: var(--ns-border); }
.ns-polish-5 ::placeholder { color: var(--ns-text-2); opacity: 1; }
.ns-polish-5 :is(.card, .card-header, .card-body) { color: var(--ns-text); background-color: var(--ns-card); border-color: var(--ns-border); }
.ns-polish-5 :is(.text-muted, .text-secondary) { color: var(--ns-text-2) !important; }
.ns-polish-5 :is(.text-light, .text-white) { color: var(--ns-text) !important; }
.ns-polish-5 :is(input:not([type="color"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea) {
    background-color: var(--ns-card);
    color: var(--ns-text);
    border-color: var(--ns-border-strong);
    min-width: 0;
}
.ns-polish-5 :is(.btn-primary, .ua-btn-primary) { background: var(--ns-gold); color: var(--ns-on-accent); border-color: var(--ns-gold); }
.ns-polish-5 :is(.btn-secondary, .btn-outline-secondary) { background: var(--ns-surface); color: var(--ns-text); border-color: var(--ns-border-strong); }
.ns-polish-5 :is(.btn, .ua-btn) { min-height: 44px; }
.ns-polish-5 .ns-orient__actions .btn-primary { color: var(--ns-on-accent); }
.ns-polish-5 .ns-orient__title { color: var(--ns-text); font-weight: 500; }
.ns-polish-5 .bft-factory button { background: var(--ns-gold); color: var(--ns-on-accent); }
.ns-polish-5 .bft-factory select option { background: var(--ns-card); color: var(--ns-text); }
.ns-polish-5 .ns-bsuccess-title { font-weight: 500; }
.ns-polish-5 .ns-bsuccess-card { border-radius: var(--ns-radius); }
.ns-polish-5 .ns-bsuccess-cta { min-height: 44px; font-weight: 500; }

/* The presentation stage remains dark; only its readable HUD ink is reconnected. */
.pv.ns-polish-5 { --pv-ink: var(--ns-text); --pv-dim: var(--ns-text-2); --pv-amber: var(--ns-gold); }
html.ns-polish-5 body { background: var(--ns-bg); color: var(--ns-text); font-family: var(--ns-font); }
/* The tools index reuses IQ1's existing frame dialect, with no separate palette. */
body:has(.bft.ns-polish-5) {
    --iq1-bg-primary: var(--ns-bg);
    --iq1-bg-secondary: var(--ns-card);
    --iq1-bg-tertiary: var(--ns-surface);
    --iq1-bg-elevated: var(--ns-elevated);
    --iq1-bg-card: var(--ns-card);
    --iq1-text-primary: var(--ns-text);
    --iq1-text-secondary: var(--ns-text-2);
    --iq1-text-muted: var(--ns-text-2);
    --iq1-accent: var(--ns-gold);
    --iq1-accent-hover: var(--ns-gold);
    --iq1-accent-light: var(--ns-gold-light);
    --iq1-border: var(--ns-border);
    --iq1-border-light: var(--ns-border-strong);
    --iq1-border-focus: var(--ns-text);
    font-family: var(--ns-font);
    background: var(--ns-bg);
    color: var(--ns-text);
}

@media (max-width: 575.98px) {
    .ns-polish-5.ns-bsuccess-page { padding: 1.5rem 1rem; }
    .ns-polish-5 .ns-bsuccess-card { padding: 1.5rem 1rem; }
    .ns-polish-5 :is(.ns-orient__actions, .bft-card) { overflow-wrap: anywhere; }
    .ns-polish-5 .ns-orient__actions { align-items: stretch; }
}
