/* Line 15861 (upskill-media-8-r1, media_modern_2026): the Google-path look for the media and solver pages that live in
   the signed-in app layout. The --ns-* values are public/css/ns-tokens.css's (Google's surface greys plus NetShow gold),
   light by default and dark under prefers-color-scheme: dark or Bootstrap's data-bs-theme="dark"; this sheet only
   scopes them to .ns-g, the page wrapper, so the app chrome around it is untouched. Swap values in ns-tokens.css first. */

.ns-g {
    --ns-bg: #ffffff;
    --ns-surface: #f1f3f4;
    --ns-card: #ffffff;
    --ns-text: #202124;
    --ns-text-2: #5f6368;
    --ns-gold: #f9ab00;
    --ns-gold-deep: #e37400;
    --ns-accent-ink: #b06000;
    --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: var(--ns-text);
    font-family: var(--ns-font);
}

@media (prefers-color-scheme: dark) {
    .ns-g {
        --ns-bg: #202124;
        --ns-surface: #292a2d;
        --ns-card: #2d2e31;
        --ns-text: #e8eaed;
        --ns-text-2: #9aa0a6;
        --ns-gold: #f5a623;
        --ns-gold-deep: #c7851a;
        --ns-accent-ink: #fdd663;
        --ns-border: rgba(232, 234, 237, .12);
        --ns-border-strong: rgba(232, 234, 237, .2);
    }
}

[data-bs-theme="dark"] .ns-g {
    --ns-bg: #202124;
    --ns-surface: #292a2d;
    --ns-card: #2d2e31;
    --ns-text: #e8eaed;
    --ns-text-2: #9aa0a6;
    --ns-gold: #f5a623;
    --ns-gold-deep: #c7851a;
    --ns-accent-ink: #fdd663;
    --ns-border: rgba(232, 234, 237, .12);
    --ns-border-strong: rgba(232, 234, 237, .2);
}

.ns-g h1, .ns-g h2, .ns-g h3 { color: var(--ns-text); font-family: var(--ns-font); font-weight: 500; letter-spacing: 0; }
.ns-g .ns-g-lead, .ns-g .text-body-secondary, .ns-g .form-text { color: var(--ns-text-2) !important; }
.ns-g .card, .ns-g .ns-g-card {
    background: var(--ns-card) !important;
    color: var(--ns-text);
    border: 1px solid var(--ns-border) !important;
    border-radius: var(--ns-radius) !important;
    box-shadow: none !important;
}
.ns-g .form-control, .ns-g .form-select {
    background: var(--ns-bg);
    color: var(--ns-text);
    border: 1px solid var(--ns-border-strong) !important;
    border-radius: 8px !important;
    font-size: 1rem;
    min-height: 44px;
}
.ns-g .form-control:focus, .ns-g .form-select:focus { border-color: var(--ns-gold-deep) !important; box-shadow: 0 0 0 3px rgba(249, 171, 0, .25); }
.ns-g .form-label { color: var(--ns-text); font-weight: 500; }
.ns-g .btn-primary, .ns-g .ns-g-primary {
    background: var(--ns-gold) !important;
    border: 0 !important;
    color: var(--ns-on-accent) !important;
    border-radius: 999px !important;
    min-height: 44px;
    padding: .55rem 1.5rem;
    font-weight: 500;
}
.ns-g .btn-primary:hover, .ns-g .ns-g-primary:hover { background: var(--ns-gold-deep) !important; }
.ns-g .ns-g-quiet {
    background: transparent;
    color: var(--ns-text);
    border: 1px solid var(--ns-border-strong);
    border-radius: 999px;
    min-height: 44px;
    padding: .5rem 1.1rem;
    font-weight: 500;
}
.ns-g .alert-link, .ns-g a.ns-g-link { color: var(--ns-accent-ink); }

/* The problem solver (MEMDOCS-0136 on LEARN-0037). */
.ns-g .ns-solver__steps li::marker { color: var(--ns-accent-ink); }
.ns-g .ns-solver__answer { background: var(--ns-surface); border: 1px solid var(--ns-border); }
.ns-g .ns-solver__photo { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin-top: .75rem; }
.ns-g .ns-solver__photo img { max-width: 96px; max-height: 96px; border-radius: 8px; border: 1px solid var(--ns-border); object-fit: cover; }
.ns-g .ns-solver__photo input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; }

/* The movie door (STORYVIDEO-0003): the genre pages' header and the one-voice narrator line. */
.ns-g .movie-viewer-card-header { background: var(--ns-surface) !important; color: var(--ns-text) !important; border-bottom: 1px solid var(--ns-border); }
.ns-g .movie-viewer-card-header h2 { color: var(--ns-text) !important; }
.ns-g .genre-switcher a { color: var(--ns-text-2); }
.ns-g .genre-switcher a.active { color: var(--ns-on-accent); background: var(--ns-gold); }
.ns-g .ns-movie-narrator {
    display: flex; align-items: flex-start; gap: .75rem;
    background: var(--ns-surface); border: 1px solid var(--ns-border); border-radius: var(--ns-radius);
    padding: .85rem 1rem; margin-bottom: 1rem;
}
.ns-g .ns-movie-narrator__name { font-weight: 500; }
.ns-g .ns-movie-narrator__line { color: var(--ns-text-2); font-size: .925rem; }

@media (max-width: 575.98px) {
    .ns-g .btn-primary, .ns-g .ns-g-primary, .ns-g .ns-g-quiet { width: 100%; }
}

/* Line 15854 (media_upskill_2026): the movie door (DELETED-0005), the video pipeline page (STORYVIDEO-0006) and the
   animation credits page (ROUTES-0211) on the same tokens. */
.ns-g .ns-movie-door__title { font-size: 1.75rem; font-weight: 500; margin: 0 0 .5rem; color: var(--ns-text); }
.ns-g .ns-movie-door__lead { color: var(--ns-text-2); margin: 0 0 1.25rem; max-width: 40rem; }
.ns-g .ns-movie-door__genres { list-style: none; margin: 0 0 1.5rem; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.ns-g .ns-movie-door__genre { display: inline-flex; align-items: center; text-decoration: none; }
.ns-g .ns-movie-door__genre:hover { border-color: var(--ns-gold-deep); }
.ns-g .ns-movie-door__next { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }
.ns-g.social-content-video-pipeline-v2 {
    --scvp-bg-primary: var(--ns-bg);
    --scvp-bg-card: var(--ns-card);
    --scvp-bg-elevated: var(--ns-surface);
    --scvp-accent: var(--ns-gold);
    --scvp-text-primary: var(--ns-text);
    --scvp-text-muted: var(--ns-text-2);
    --scvp-border: var(--ns-border-strong);
    --scvp-focus-ring: rgba(249, 171, 0, .25);
}
.ns-g.social-content-video-pipeline-v2 input[type="file"] { background: var(--ns-bg) !important; }
.ns-g.social-content-video-pipeline-v2 input[type="file"]::file-selector-button { color: var(--ns-accent-ink); }
.ns-g.social-content-video-pipeline-v2 table thead th { background: var(--ns-surface); }
.ns-g.social-content-video-pipeline-v2 table tbody tr:nth-child(odd) { background: var(--ns-surface); }
.ns-g.social-content-video-pipeline-v2 table tbody tr:nth-child(even) { background: var(--ns-card); }
.ns-g.social-content-video-pipeline-v2 .cc-card-header, .ns-g.social-content-video-pipeline-v2 .cc-card-header .text-white { background: var(--ns-surface) !important; color: var(--ns-text) !important; }
.ns-g.ns-anim-credits-page { background: var(--ns-bg); border-radius: var(--ns-radius); padding: 1rem; }
.ns-g .ns-anim-credits h2 { color: var(--ns-text); font-weight: 500; }
.ns-g .ns-anim-credits p, .ns-g .ns-anim-thanks { color: var(--ns-text-2); }
.ns-g .ns-anim-credits a, .ns-g .ns-anim-thanks a { color: var(--ns-accent-ink); font-weight: 500; }
.ns-g .ns-anim-credits .ns-content-card { background: var(--ns-card); border: 1px solid var(--ns-border); border-radius: var(--ns-radius); }

@media (max-width: 575.98px) {
    .ns-g .ns-movie-door__next .ns-g-primary { width: 100%; }
}