/* Line 17171 (gp-public-pages-part-2-r1, ai.features.gp_public_2): the NetShow new style, the Google path in light and dark,
   on the public pages of part 2 of 3 (/dashboard/chat .. /marketplace/characters/{listing}: docs, FAQ, features, audiences,
   help, the persona doors, the footer pages, industries, the marketplace shelves, the embeds, the live-stage attendees page).
   Linked last in <head> by partials.gp-public-2-style only while the key is on and the path is one of
   App\Support\Marketing\GpPublic2::PAGES, so every rule here may stay unscoped beyond :root.
   The pages already wear their Google-path dress (css/ns-tokens.css and their own sheets); a real-browser walk at 375 and
   1440, light and dark, found what was left loose, and this sheet tightens only that:
   - type drifted off the scale (15, 15.2, 16.8, 17.6, 18.4, 21.6, 28.8, 57.6, 64, 70.4 px): R2 snaps it to 12/14/16/20/24/32/48;
   - headings and copy sat on mixed rhythms: R1 puts them on the 4 px grid with one line height each;
   - section links, toolbar buttons and lone links were 13..40 px tall: R13 makes them 44 px;
   - the live-stage attendees header pushed its link 17 px past a 375 px screen: it wraps;
   - one keyboard focus ring and reduced motion everywhere (R4, R5); wide media, tables and code stay inside the screen.
   Most of these pages size their type inline (style="font-size:1.2rem"), so the scale's font sizes carry !important; nothing
   else here does. No colour of its own (R3): the focus ring reads the page's own --ns-* accent with a fallback. Site chrome (top menu,
   footer) and the live host (stage, dock, hamburger, captions, the free ring) are never selected. */

/* ---------- 1. Type on the scale (R2) and one rhythm (R1), inside the page's own content ---------- */

:root main :is(h1, .h1):not(:is(nav, .navbar, footer, [role="contentinfo"], netshow-stage, alive-agent, [data-alive-dock], .ns-free-ring, [class*="concierge"], [class*="own-stage"]) *) {
    font-size: 32px !important;
    line-height: 1.25;
    letter-spacing: -0.01em;
    overflow-wrap: break-word;
}

:root main :is(h2, .h2):not(:is(nav, .navbar, footer, [role="contentinfo"], netshow-stage, alive-agent, [data-alive-dock], .ns-free-ring, [class*="concierge"], [class*="own-stage"]) *) {
    font-size: 24px !important;
    line-height: 1.33;
    overflow-wrap: break-word;
}

:root main :is(h3, .h3):not(:is(nav, .navbar, footer, [role="contentinfo"], netshow-stage, alive-agent, [data-alive-dock], .ns-free-ring, [class*="concierge"], [class*="own-stage"]) *) {
    font-size: 20px !important;
    line-height: 1.4;
    overflow-wrap: break-word;
}

:root main :is(h4, h5, h6, .h4, .h5, .h6):not(:is(nav, .navbar, footer, [role="contentinfo"], netshow-stage, alive-agent, [data-alive-dock], .ns-free-ring, [class*="concierge"], [class*="own-stage"]) *) {
    font-size: 16px !important;
    line-height: 1.5;
}

@media (min-width: 768px) {
    :root main :is(h1, .h1):not(:is(nav, .navbar, footer, [role="contentinfo"], netshow-stage, alive-agent, [data-alive-dock], .ns-free-ring, [class*="concierge"], [class*="own-stage"]) *) {
        font-size: 48px !important;
        line-height: 1.17;
    }

    :root main :is(h2, .h2):not(:is(nav, .navbar, footer, [role="contentinfo"], netshow-stage, alive-agent, [data-alive-dock], .ns-free-ring, [class*="concierge"], [class*="own-stage"]) *) {
        font-size: 32px !important;
        line-height: 1.25;
    }
}

/* Body copy is 16 px on a 24 px line. */
:root main :is(p, li, dd, dt, td, th, label, blockquote, figcaption, summary):not(:is(nav, .navbar, footer, [role="contentinfo"], netshow-stage, alive-agent, [data-alive-dock], .ns-free-ring, [class*="concierge"], [class*="own-stage"]) *) {
    font-size: 16px !important;
    line-height: 1.5;
    overflow-wrap: break-word;
}


/* Secondary copy (card text, hints, counts, muted lines) is 14 px; badges and chips are 12 px. */
:root main :is(small, .small, .text-muted, .muted-copy, .form-text, [class*="__copy"], [class*="__hint"], [class*="__count"], [class*="__meta"], :where([class*="card"]) p):not(:is(nav, .navbar, footer, [role="contentinfo"], netshow-stage, alive-agent, [data-alive-dock], .ns-free-ring, [class*="concierge"], [class*="own-stage"]) *) {
    font-size: 14px !important;
    line-height: 1.43;
}

/* A hero's lead line (the paragraph right under the page title) is 20 px, also when it is muted. */
:root main :is(.lead, .fs-5, [class*="blurb"], [class*="subtitle"], [class*="lede"], h1 + p):not(:is(nav, .navbar, footer, [role="contentinfo"], netshow-stage, alive-agent, [data-alive-dock], .ns-free-ring, [class*="concierge"], [class*="own-stage"]) *) {
    font-size: 20px !important;
    line-height: 1.4;
}

:root main :is(.badge, [class*="__badge"], [class*="__chip"], [class*="eyebrow"]):not(:is(nav, .navbar, footer, [role="contentinfo"], netshow-stage, alive-agent, [data-alive-dock], .ns-free-ring, [class*="concierge"], [class*="own-stage"]) *) {
    font-size: 12px !important;
    line-height: 1.33;
}

/* A link that is not a button, chip or badge reads at the size of the line it sits in, and at 16 px on its own (a card or
   list link). */
:root main a:not([class*="btn"], [class*="cta"], .badge, [class*="__badge"], [class*="__chip"]):not(:is(nav, .navbar, footer, [role="contentinfo"], netshow-stage, alive-agent, [data-alive-dock], .ns-free-ring, [class*="concierge"], [class*="own-stage"]) *) {
    font-size: 16px !important;
}

:root main :is(p, li, dd, td, th, label, small, h1, h2, h3, h4, h5, h6) a:not([class*="btn"], [class*="cta"], .badge, [class*="__badge"], [class*="__chip"]):not(:is(nav, .navbar, footer, [role="contentinfo"], netshow-stage, alive-agent, [data-alive-dock], .ns-free-ring, [class*="concierge"], [class*="own-stage"]) *) {
    font-size: inherit !important;
}

/* Buttons and calls to action read at 16 px. */
:root main :is(.btn, button, [role="button"], [class*="__cta"], [class*="-cta"], .ns-btn):not(:is(nav, .navbar, footer, [role="contentinfo"], netshow-stage, alive-agent, [data-alive-dock], .ns-free-ring, [class*="concierge"], [class*="own-stage"]) *) {
    font-size: 16px !important;
}

/* The workforce page (/employee-ai-assistant) prints Bootstrap's .text-white inside its token cards, which turn light on a
   light device: the titles read the page's own --ns-text there, so they show in light and stay white-on-dark in dark. */
:root .workforce-page :is(.soft-card, .segment-card, .capability-card) .text-white {
    color: var(--ns-text) !important;
}

/* ---------- 2. Tap targets of at least 44 px (R13) ---------- */

:root main :is(.btn, button, [role="button"], select, summary, .ns-btn, input:not([type="checkbox"], [type="radio"], [type="range"], [type="hidden"], [type="color"])):not(:is(netshow-stage, alive-agent, [data-alive-dock], .ns-free-ring, [class*="concierge"], [class*="own-stage"]) *) {
    min-height: 44px;
}

/* The help centre's section list, and a lone text link set beside a filled button (the industry pages' "Or build it
   yourself"), become full-height targets without changing their look. */
:root .ns-help-toc a,
:root main a[style*="align-self"] {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
}

/* The website-talk canvas toolbar (lets_talk_website). */
:root .toolbar-item > button {
    min-width: 44px;
    min-height: 44px;
}

/* ---------- 3. Nothing leaves a 375 px screen ---------- */

:root main :is(img, video, iframe, canvas):not(:is(netshow-stage, alive-agent, [data-alive-dock], .ns-free-ring, [class*="concierge"], [class*="own-stage"]) *) {
    max-width: 100%;
}

:root main :is(img, video):not(:is(netshow-stage, alive-agent, [data-alive-dock], .ns-free-ring, [class*="concierge"], [class*="own-stage"]) *) {
    height: auto;
}

:root main pre {
    max-width: 100%;
    overflow-x: auto;
}

@media (max-width: 767.98px) {
    :root main table:not(:is(netshow-stage, alive-agent, [data-alive-dock]) *) {
        display: block;
        max-width: 100%;
        overflow-x: auto;
    }
}

/* The live-stage attendees registry: its header wraps, so "Open Live Stage" stays on the screen at 375 px. */
:root body.ns-gp > .wrap > .glass.header {
    flex-wrap: wrap;
}

:root body.ns-gp > .wrap > .glass.header h1 {
    font-size: 24px !important;
    line-height: 1.33;
}

:root body.ns-gp > .wrap > .glass.header > a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
}

/* ---------- 4. One focus ring (R4) and reduced motion (R5) ---------- */

:root main :is(a, button, input, select, textarea, summary, [tabindex]):focus-visible,
:root body.ns-gp > .wrap :is(a, button, input, select, textarea):focus-visible {
    outline: var(--ns-focus-ring-width, 2px) solid var(--ns-focus-ring, var(--ns-gold, currentColor));
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    :root main *:not(:is(netshow-stage, alive-agent, [data-alive-dock], .ns-free-ring, [class*="concierge"], [class*="own-stage"]) *) {
        scroll-behavior: auto;
        transition-duration: 0ms;
        animation-duration: 0ms;
        animation-iteration-count: 1;
    }
}