/* Line 15925 (upskill-channels-2-r1): the Google path for the 2024-2025 channel pages (Twilio phone agents, Zaps, the
   auto-post generator, the content designer, the Reddit draft card, the quick-agent embed page). Printed only while
   ai.features.channels_2026_stack is on (App\Support\Channels\Channels2026::stylesheet()), after css/ui-kit.css, and
   every rule is scoped under .ns-gp-ch, the class a lit page adds to its own container. Values read the house ui-kit
   tokens (--nsk-*, which follow the app theme in light and dark) with Google-path fallbacks. Calm surfaces, Google
   type and spacing, one accent, 44 px targets, nothing wider than a 375 px phone. */

.ns-gp-ch {
    --ch-ink: var(--nsk-ink, #202124);
    --ch-sub: var(--nsk-sub, #5f6368);
    --ch-surface: var(--nsk-surface, #ffffff);
    --ch-inset: var(--nsk-inset, #f1f3f4);
    --ch-line: var(--nsk-bd, #dadce0);
    --ch-line-soft: var(--nsk-bd-soft, #e8eaed);
    --ch-accent: var(--nsk-accent, #1a73e8);
    --ch-on-accent: var(--nsk-on-accent, #ffffff);
    --ch-focus: var(--nsk-focus, #1a73e8);
    --ch-err: var(--nsk-err, #d93025);
    --ch-radius: 12px;
    max-width: 72rem;
    color: var(--ch-ink);
    font-family: var(--nsk-font-body, Roboto, 'Segoe UI', system-ui, -apple-system, Arial, sans-serif);
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.ns-gp-ch h1, .ns-gp-ch h2, .ns-gp-ch h3, .ns-gp-ch h4, .ns-gp-ch h5 {
    color: var(--ch-ink);
    font-family: var(--nsk-font-display, 'Google Sans', Roboto, system-ui, sans-serif);
    font-weight: 500;
    letter-spacing: 0;
}
.ns-gp-ch h1, .ns-gp-ch .h1 { font-size: 1.6rem; }
.ns-gp-ch h2, .ns-gp-ch .h2 { font-size: 1.3rem; }
.ns-gp-ch .text-muted, .ns-gp-ch small, .ns-gp-ch .form-text { color: var(--ch-sub); }

.ns-gp-ch .card, .ns-gp-ch .modal-content, .ns-gp-ch .list-group-item {
    background: var(--ch-surface);
    color: var(--ch-ink);
    border: 1px solid var(--ch-line);
    border-radius: var(--ch-radius);
    box-shadow: none;
}
.ns-gp-ch .card-header, .ns-gp-ch .card-footer, .ns-gp-ch .modal-header, .ns-gp-ch .modal-footer {
    background: transparent;
    border-color: var(--ch-line-soft);
    color: var(--ch-ink);
}

.ns-gp-ch .form-control, .ns-gp-ch .form-select, .ns-gp-ch textarea, .ns-gp-ch select, .ns-gp-ch input[type="text"],
.ns-gp-ch input[type="email"], .ns-gp-ch input[type="url"], .ns-gp-ch input[type="tel"], .ns-gp-ch input[type="number"] {
    min-height: 44px;
    max-width: 100%;
    background: var(--ch-surface);
    color: var(--ch-ink);
    border: 1px solid var(--ch-line);
    border-radius: 8px;
}
.ns-gp-ch textarea { min-height: 6rem; }
.ns-gp-ch .form-control:focus, .ns-gp-ch .form-select:focus, .ns-gp-ch textarea:focus, .ns-gp-ch select:focus {
    border-color: var(--ch-focus);
    box-shadow: 0 0 0 1px var(--ch-focus);
    outline: none;
}
.ns-gp-ch label, .ns-gp-ch .form-label { color: var(--ch-ink); font-weight: 500; }

.ns-gp-ch .btn {
    min-height: 44px;
    border-radius: 999px;
    padding: .5rem 1.25rem;
    font-weight: 500;
    box-shadow: none;
}
.ns-gp-ch .btn-primary, .ns-gp-ch .btn-success {
    background: var(--ch-accent);
    border-color: var(--ch-accent);
    color: var(--ch-on-accent);
}
.ns-gp-ch .btn-secondary, .ns-gp-ch .btn-light, .ns-gp-ch .btn-outline-primary, .ns-gp-ch .btn-outline-secondary, .ns-gp-ch .btn-info {
    background: transparent;
    border: 1px solid var(--ch-line);
    color: var(--ch-accent);
}
.ns-gp-ch .btn-danger, .ns-gp-ch .btn-outline-danger {
    background: transparent;
    border: 1px solid var(--ch-err);
    color: var(--ch-err);
}
.ns-gp-ch .btn:focus-visible, .ns-gp-ch a:focus-visible { outline: 2px solid var(--ch-focus); outline-offset: 2px; }
.ns-gp-ch a:not(.btn) { color: var(--ch-accent); }

.ns-gp-ch .table { color: var(--ch-ink); border-color: var(--ch-line-soft); }
.ns-gp-ch .table > :not(caption) > * > * { background: transparent; color: var(--ch-ink); border-color: var(--ch-line-soft); }
.ns-gp-ch .table-responsive, .ns-gp-ch table { max-width: 100%; }
.ns-gp-ch .badge { border-radius: 999px; font-weight: 500; }
.ns-gp-ch .alert { border-radius: var(--ch-radius); }
.ns-gp-ch img, .ns-gp-ch video, .ns-gp-ch iframe { max-width: 100%; }

@media (max-width: 480px) {
    .ns-gp-ch { padding-left: 1rem; padding-right: 1rem; }
    .ns-gp-ch .row > [class*="col-"] { flex: 0 0 100%; max-width: 100%; }
}

/* Line 15926 (upskill-channels-3-r1, ai.features.channels_2026_stack): the Google-path look for the channels and
   integrations pages (the plans channels row, the Slack settings page, the plugin pages, the social marketing team
   pages, NetShowLive). Loaded only while the key is lit (App\Support\Channels\Channels2026::stylesheet(), once per
   page) and scoped to [data-channels-gp], so key-off pages keep main's bytes. Every value reads the ns-tokens.css token
   first and falls back to the Google-path values ns-tokens.css declares. Signed-in pages follow the app's own theme
   switch (html[data-bs-theme]); a page with no theme switch (the guest plans page) follows prefers-color-scheme.
   375 px first, 44 px touch targets. */

html [data-channels-gp],
html:not([data-bs-theme]) [data-channels-gp] {
    --ch-bg: var(--ns-card, #ffffff);
    --ch-surface: var(--ns-surface, #f1f3f4);
    --ch-text: var(--ns-text, #202124);
    --ch-text-2: var(--ns-text-2, #5f6368);
    --ch-line: var(--ns-border, #dadce0);
    --ch-accent: var(--ns-gold, #f9ab00);
    --ch-on-accent: var(--ns-on-accent, #202124);
    --ch-link: #1967d2;
    --ch-font: var(--ns-font, Roboto, 'Segoe UI', system-ui, -apple-system, Arial, sans-serif);
    --ch-radius: var(--ns-radius, 12px);
    --ch-shadow: 0 1px 2px rgba(60, 64, 67, .3), 0 1px 3px 1px rgba(60, 64, 67, .15);
}

html[data-bs-theme="dark"] [data-channels-gp] {
    --ch-bg: #2d2e31;
    --ch-surface: #292a2d;
    --ch-text: #e8eaed;
    --ch-text-2: #9aa0a6;
    --ch-line: rgba(232, 234, 237, .16);
    --ch-accent: #f5a623;
    --ch-on-accent: #202124;
    --ch-link: #8ab4f8;
    --ch-shadow: none;
}

@media (prefers-color-scheme: dark) {
    html:not([data-bs-theme]) [data-channels-gp] {
        --ch-bg: #2d2e31;
        --ch-surface: #292a2d;
        --ch-text: #e8eaed;
        --ch-text-2: #9aa0a6;
        --ch-line: rgba(232, 234, 237, .16);
        --ch-accent: #f5a623;
        --ch-on-accent: #202124;
        --ch-link: #8ab4f8;
        --ch-shadow: none;
    }
}

[data-channels-gp] { font-family: var(--ch-font); color: var(--ch-text); }

/* The shared parts: one card, one primary button, one quiet link. */
[data-channels-gp] .ns-ch-card,
[data-channels-gp] .ns-ch-canonical {
    background: var(--ch-bg);
    color: var(--ch-text);
    border: 1px solid var(--ch-line);
    border-radius: var(--ch-radius);
    box-shadow: var(--ch-shadow);
}
[data-channels-gp] .ns-ch-card { max-width: 40rem; margin: 1.5rem auto; padding: 1.5rem 1.25rem; }
[data-channels-gp] .ns-ch-eyebrow { margin: 0 0 .25rem; font-size: .8125rem; letter-spacing: .02em; color: var(--ch-text-2); }
[data-channels-gp] .ns-ch-title { margin: 0 0 .5rem; font-size: clamp(1.375rem, 5vw, 1.75rem); font-weight: 400; line-height: 1.3; color: var(--ch-text); }
[data-channels-gp] .ns-ch-text { margin: 0 0 1.25rem; font-size: 1rem; line-height: 1.5; color: var(--ch-text-2); }
[data-channels-gp] .ns-ch-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.25rem; }
[data-channels-gp] .ns-ch-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 1.5rem;
    border-radius: 22px;
    background: var(--ch-accent);
    color: var(--ch-on-accent);
    font-weight: 500;
    text-decoration: none;
}
[data-channels-gp] .ns-ch-btn:hover { filter: brightness(1.05); color: var(--ch-on-accent); }
[data-channels-gp] .ns-ch-link { display: inline-flex; align-items: center; min-height: 44px; color: var(--ch-link); text-decoration: none; }
[data-channels-gp] .ns-ch-link:hover { text-decoration: underline; }
[data-channels-gp] :is(.ns-ch-btn, .ns-ch-link):focus-visible { outline: 2px solid var(--ch-link); outline-offset: 2px; }

/* CHANNELS-0029 / 0083 / 0120: the canonical pointer on a legacy plugin page. */
[data-channels-gp] .ns-ch-canonical { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1rem; margin: 0 0 1rem; padding: 1rem 1.25rem; background: var(--ch-surface); }
[data-channels-gp] .ns-ch-canonical p { flex: 1 1 16rem; color: var(--ch-text); line-height: 1.5; }

/* CHANNELS-0034 / HANDOFF1-0059: the "where your agent answers" row (plans, pricing, docs). */
.ns-ch-row[data-channels-gp] { max-width: 72rem; margin: 1.5rem auto; padding: 1.25rem; min-width: 0; background: var(--ch-surface); border-radius: var(--ch-radius); }
.ns-ch-row[data-channels-gp] .ns-ch-row-title { margin: 0; font-size: clamp(1.0625rem, 4vw, 1.375rem); font-weight: 400; line-height: 1.35; color: var(--ch-text); }
.ns-ch-row[data-channels-gp] .ns-ch-chips { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; padding: 0; margin: .75rem 0 0; }
.ns-ch-row[data-channels-gp] .ns-ch-chip { display: inline-flex; align-items: center; min-height: 32px; padding: 0 .875rem; border: 1px solid var(--ch-line); border-radius: 16px; background: var(--ch-bg); color: var(--ch-text); font-size: .875rem; overflow-wrap: anywhere; }

/* The Bootstrap cards the older pages draw (Slack settings, plugin details, the team page). */
[data-channels-gp] .card { background: var(--ch-bg); color: var(--ch-text); border: 1px solid var(--ch-line); border-radius: var(--ch-radius); box-shadow: var(--ch-shadow); }
[data-channels-gp] .card :is(h1, h2, h3, h4, h5) { color: var(--ch-text); font-weight: 500; }
[data-channels-gp] .card :is(p, .text-muted) { color: var(--ch-text-2); }
[data-channels-gp] :is(input[type="text"], input[type="search"], textarea, select) { background: var(--ch-bg); color: var(--ch-text); border: 1px solid var(--ch-line); border-radius: 8px; min-height: 44px; }
[data-channels-gp] .btn-primary { background: var(--ch-accent); border-color: var(--ch-accent); color: var(--ch-on-accent); border-radius: 22px; min-height: 44px; }

/* VWORLD-0041: the NetShowLive room page (the page's own sheet paints the container black). */
.livekit-container[data-channels-gp] { background: var(--ch-surface); min-height: auto; padding: 1rem .5rem; }
.livekit-container[data-channels-gp] .livekit-header { background: transparent; border-bottom: 1px solid var(--ch-line); }
.livekit-container[data-channels-gp] .start-controls { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem; }
.livekit-container[data-channels-gp] .btn-start { padding: 0 1.5rem; white-space: nowrap; }
.livekit-container[data-channels-gp] .agent-select { background: var(--ch-bg); color: var(--ch-text); border: 1px solid var(--ch-line); border-radius: 8px; min-height: 44px; }
.livekit-container[data-channels-gp] .btn-action { background: transparent; color: var(--ch-text); border: 1px solid var(--ch-line); padding: 0 1rem; }
.livekit-container[data-channels-gp] .livekit-card { background: var(--ch-bg); color: var(--ch-text); border: 1px solid var(--ch-line); border-radius: var(--ch-radius); box-shadow: var(--ch-shadow); }
.livekit-container[data-channels-gp] .livekit-title { color: var(--ch-text); font-weight: 400; }
.livekit-container[data-channels-gp] :is(.btn-start, .btn-send) { background: var(--ch-accent); color: var(--ch-on-accent); border: 0; border-radius: 22px; min-height: 44px; font-weight: 500; }
.livekit-container[data-channels-gp] .btn-action { border-radius: 22px; min-height: 44px; }
.livekit-container[data-channels-gp] :is(.chat-area, .chat-messages) { background: var(--ch-surface); color: var(--ch-text); border-color: var(--ch-line); }

@media (max-width: 480px) {
    [data-channels-gp] .ns-ch-card { margin: 1rem .25rem; padding: 1.25rem 1rem; }
    [data-channels-gp] .ns-ch-actions .ns-ch-btn { width: 100%; }
    .livekit-container[data-channels-gp] .action-buttons { display: flex; flex-wrap: wrap; gap: .5rem; }
}

/* Line 15836 (upskill-voice-5-r2): a standalone page with no app shell (the check-in and voice-chat pages behind
   ai.features.voice_phone_modern) wears .ns-gp too, and the scope reads css/ns-tokens.css's two sets instead of the
   shell's --nsk-* tokens: light by default, dark under prefers-color-scheme: dark. */
.ns-gp.ns-gp-ch {
    --ch-ink: var(--ns-text);
    --ch-sub: var(--ns-text-2);
    --ch-surface: var(--ns-card);
    --ch-inset: var(--ns-surface);
    --ch-line: var(--ns-border-strong);
    --ch-line-soft: var(--ns-border);
    font-family: var(--ns-font);
}