/* Line 17172 (gp-public-pages-part-3-r1, ai.features.gp_public_3): part 3 of 3 of the NetShow new style, the Google path in
   light and dark, on the public pages from /marketplace/studio-characters to /workforce (App\Support\Marketing\GpPublic3).
   Linked last in <head>, after css/ns-tokens.css, only while the key is on:
   - layouts.app pages through the line 16198 drop-in config/google_path_layouts.d/gp-public-3.php: <body data-ns-gp-public-3>;
   - layouts.landing, layouts.content, layouts.product, the studio-characters frame, /vrm-rack/public, the live stage and
     /meeting through partials.gp-public-3-style: <html data-ns-gp-public-3>.
   Section T declares the canonical light and dark token set once on that root (SOURCE: the .ns-gp set of
   public/css/ns-tokens.css, line 15532/16298, same names and values), so a page outside the landing frame reads the same
   surfaces; every rule below reads --ns-* tokens only. Rules R1-R13 (docs/design/POLISH-TOKENS.md): 4 px grid, the
   12/14/16/20/24/32/48 type scale, colour from tokens only, 44 px targets, readable elevations in light and dark, one
   filled button per screen, a visible focus ring, no horizontal scroll at 375 px, reduced motion honoured.
   The live host (stage, overlay, caption, hamburger) is not touched: every rule stays inside the page's content plane. */

/* ---------- T. The token set (light; dark under prefers-color-scheme) ---------- */
[data-ns-gp-public-3] {
    --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-focus: #1a73e8;
    --ns-font: Roboto, 'Segoe UI', system-ui, -apple-system, Arial, sans-serif;
    --ns-radius: 12px;
    color-scheme: light;
}
@media (prefers-color-scheme: dark) {
    [data-ns-gp-public-3] {
        --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;
        --ns-focus: #8ab4f8;
        color-scheme: dark;
    }
}

/* ---------- P. The page plane ---------- */

/* P1. One background and one ink (R3), Roboto first, no sideways scroll at 375 px (R12). */
html[data-ns-gp-public-3],
html[data-ns-gp-public-3] body,
body[data-ns-gp-public-3] {
    background-color: var(--ns-bg);
    color: var(--ns-text);
    font-family: var(--ns-font);
    overflow-x: clip;
}
[data-ns-gp-public-3] :is(main, #main-content) {
    color: var(--ns-text);
    overflow-wrap: anywhere;
    min-width: 0;
}
[data-ns-gp-public-3] :is(main, #main-content) :is(img, video, canvas, iframe, svg, table, pre) { max-width: 100%; }
[data-ns-gp-public-3] :is(main, #main-content) img { height: auto; }
[data-ns-gp-public-3] :is(main, #main-content) pre { white-space: pre-wrap; }

/* P2. One type scale (R2): the page title snaps to 32 px on a phone and 48 px from 1024 px up (the pages drew 28, 35.2, 40,
   52 and 57.6 px), sections 20 then 24 px, 16 px body. */
[data-ns-gp-public-3] :is(main, #main-content) :is(h1, .h1) { font-size: 32px; line-height: 40px; font-weight: 500; letter-spacing: 0; }
[data-ns-gp-public-3] :is(main, #main-content) :is(h2, .h2) { font-size: 20px; line-height: 28px; font-weight: 500; letter-spacing: 0; }
[data-ns-gp-public-3] :is(main, #main-content) :is(h3, .h3, h4, .h4) { font-size: 16px; line-height: 24px; font-weight: 600; }
[data-ns-gp-public-3] :is(main, #main-content) :is(p, li, dd, label, td, th) { line-height: 1.5; }
[data-ns-gp-public-3] :is(main, #main-content) :is(.text-muted, .muted, small, .small, figcaption, .form-text) { color: var(--ns-text-2) !important; }
@media (min-width: 768px) {
    [data-ns-gp-public-3] :is(main, #main-content) :is(h2, .h2) { font-size: 24px; line-height: 32px; }
}
@media (min-width: 1024px) {
    [data-ns-gp-public-3] :is(main, #main-content) :is(h1, .h1) { font-size: 48px; line-height: 56px; }
}

/* P3. Plain text links read the accent's text shade (styled buttons and cards keep their own); every target shows a focus
   ring everyone can see (R9). */
[data-ns-gp-public-3] :is(main, #main-content) :is(p, li, dd, td, figcaption) a:not([class]) { color: var(--ns-gold-light); text-underline-offset: 2px; }
[data-ns-gp-public-3] :is(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 2px solid var(--ns-focus);
    outline-offset: 2px;
}

/* ---------- C. Surfaces, forms and buttons inside the plane ---------- */

/* C1. Cards and panels sit on elevation 1 with a hairline (R6), one 12 px radius. */
[data-ns-gp-public-3] :is(main, #main-content) :is(.card, .modal-content, .accordion-item, .list-group-item, .dropdown-menu, .popover) {
    background-color: var(--ns-card);
    color: var(--ns-text);
    border-color: var(--ns-border-strong);
    border-radius: var(--ns-radius);
}
[data-ns-gp-public-3] :is(main, #main-content) :is(.card-header, .card-footer, .modal-header, .modal-footer, .accordion-button) {
    background-color: var(--ns-surface);
    color: var(--ns-text);
    border-color: var(--ns-border);
}
[data-ns-gp-public-3] :is(main, #main-content) .card-body { color: var(--ns-text); }
[data-ns-gp-public-3] :is(main, #main-content) .alert {
    --bs-alert-bg: var(--ns-surface);
    --bs-alert-color: var(--ns-text);
    --bs-alert-border-color: var(--ns-border-strong);
    --bs-alert-link-color: var(--ns-gold-light);
    border-radius: var(--ns-radius);
}
[data-ns-gp-public-3] :is(main, #main-content) :is(.alert-danger, .alert-warning) { border-inline-start: 4px solid var(--ns-gold); }

/* C2. Tables: token lines, readable heads, a sideways scroll inside the table on a phone instead of the page. */
[data-ns-gp-public-3] :is(main, #main-content) .table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--ns-text);
    --bs-table-border-color: var(--ns-border);
    --bs-table-striped-bg: var(--ns-surface);
    --bs-table-striped-color: var(--ns-text);
    --bs-table-hover-bg: var(--ns-surface);
    --bs-table-hover-color: var(--ns-text);
}
[data-ns-gp-public-3] :is(main, #main-content) .table th { color: var(--ns-text-2); font-weight: 500; }
@media (max-width: 767.98px) {
    [data-ns-gp-public-3] :is(main, #main-content) table:not(.table-responsive table) { display: block; overflow-x: auto; }
}

/* C3. Fields: 44 px tall (R7), token surfaces, a focus ring instead of a glow, 16 px text so a phone never zooms. */
[data-ns-gp-public-3] :is(main, #main-content) :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]), select, textarea, .form-control, .form-select) {
    min-height: 44px;
    font-size: 16px;
    background-color: var(--ns-card);
    color: var(--ns-text);
    border: 1px solid var(--ns-border-strong);
    border-radius: 8px;
}
[data-ns-gp-public-3] :is(main, #main-content) :is(input, textarea, .form-control)::placeholder { color: var(--ns-text-2); opacity: 1; }
[data-ns-gp-public-3] :is(main, #main-content) :is(.form-control, .form-select, input, select, textarea):focus {
    border-color: var(--ns-focus);
    box-shadow: 0 0 0 1px var(--ns-focus);
}
[data-ns-gp-public-3] :is(main, #main-content) :is(label, .form-label) { color: var(--ns-text); font-weight: 500; }
[data-ns-gp-public-3] :is(main, #main-content) .invalid-feedback { font-size: 14px; }

/* C4. Buttons: 44 px targets (R7); the one filled step wears the accent (R8), every other button is outlined. */
[data-ns-gp-public-3] :is(main, #main-content) :is(.btn, button:not([class]), input[type="submit"], input[type="button"]) {
    min-height: 44px;
    border-radius: 8px;
    font-weight: 500;
    font-family: var(--ns-font);
}
[data-ns-gp-public-3] :is(main, #main-content) :is(.btn-primary, .btn-warning, input[type="submit"]) {
    --bs-btn-bg: var(--ns-gold);
    --bs-btn-border-color: var(--ns-gold);
    --bs-btn-color: var(--ns-on-accent);
    --bs-btn-hover-bg: var(--ns-gold-deep);
    --bs-btn-hover-border-color: var(--ns-gold-deep);
    --bs-btn-hover-color: var(--ns-on-accent);
    --bs-btn-active-bg: var(--ns-gold-deep);
    --bs-btn-active-border-color: var(--ns-gold-deep);
    --bs-btn-active-color: var(--ns-on-accent);
    background-color: var(--ns-gold);
    border-color: var(--ns-gold);
    color: var(--ns-on-accent);
}
[data-ns-gp-public-3] :is(main, #main-content) :is(.btn-secondary, .btn-light, .btn-dark, .btn-outline-primary, .btn-outline-secondary, .btn-outline-light, .btn-outline-dark, .btn-info) {
    --bs-btn-bg: transparent;
    --bs-btn-color: var(--ns-text);
    --bs-btn-border-color: var(--ns-border-strong);
    --bs-btn-hover-bg: var(--ns-surface);
    --bs-btn-hover-color: var(--ns-text);
    --bs-btn-hover-border-color: var(--ns-border-strong);
    background-color: transparent;
    color: var(--ns-text);
    border-color: var(--ns-border-strong);
}
[data-ns-gp-public-3] :is(main, #main-content) :is(.badge.bg-primary, .badge.bg-secondary, .badge.bg-dark) {
    background-color: var(--ns-surface) !important;
    color: var(--ns-text) !important;
    border: 1px solid var(--ns-border);
}

/* C5. Bootstrap's own background and text helpers follow the scheme instead of staying white on dark. */
[data-ns-gp-public-3] :is(main, #main-content) :is(.bg-white, .bg-light) { background-color: var(--ns-card) !important; color: var(--ns-text); }
[data-ns-gp-public-3] :is(main, #main-content) :is(.text-dark, .text-black) { color: var(--ns-text) !important; }
[data-ns-gp-public-3] :is(main, #main-content) hr { border-color: var(--ns-border-strong); opacity: 1; }

/* ---------- F. The worst pages of part 3 ---------- */

/* F1. /start, /start/personal, /start/business, /start/configure, /start/channel (activation.partials.theme): the panel and
   every option card were painted --ns-gold, so the grey copy and white titles sat on the accent at contrast below 2:1.
   They sit on the card and surface tokens, and the accent goes back to the one step each card offers. */
[data-ns-gp-public-3] .ns-activation-panel { background: var(--ns-card); border-color: var(--ns-border-strong); box-shadow: none; }
[data-ns-gp-public-3] .ns-activation-panel--soft { background: var(--ns-surface); }
[data-ns-gp-public-3] .ns-activation-option { background: var(--ns-surface); border-color: var(--ns-border-strong); color: var(--ns-text); }
[data-ns-gp-public-3] .ns-activation-option:hover { background: var(--ns-elevated); border-color: var(--ns-gold); color: var(--ns-text); }
[data-ns-gp-public-3] :is(.ns-activation-option__title, .ns-activation-radio__title) { color: var(--ns-text); }
[data-ns-gp-public-3] :is(.ns-activation-option__copy, .ns-activation-radio__copy, .ns-activation-summary, .ns-activation-option__meta) { color: var(--ns-text-2); }
[data-ns-gp-public-3] .ns-activation-option__icon { background: var(--ns-elevated); color: var(--ns-gold-light); }
[data-ns-gp-public-3] .ns-activation-link,
[data-ns-gp-public-3] .ns-activation-option:hover .ns-activation-link { color: var(--ns-gold-light); min-height: 44px; }

/* ---------- M. Motion (R13): the plane's transitions stop; the live host keeps its own reduced-motion rules. ---------- */
@media (prefers-reduced-motion: reduce) {
    [data-ns-gp-public-3] :is(main, #main-content) *,
    [data-ns-gp-public-3] :is(main, #main-content) *::before,
    [data-ns-gp-public-3] :is(main, #main-content) *::after {
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}