/* Map standalone category colors to the existing appearance settings. Page spacing stays in its original stylesheet. */
body[data-mobile-section] {
    --section-accent-text: var(--cd-primary-soft);
    color-scheme: dark;
    --music-bg: var(--cd-app-bg);
    --music-surface: var(--cd-card-bg);
    --music-surface-soft: var(--cd-control-bg);
    --music-text: var(--cd-text-main);
    --music-muted: var(--cd-text-muted);
    --music-border: var(--cd-border);
    --music-accent: var(--cd-primary);
    --music-accent-soft: color-mix(in srgb, var(--cd-primary) 16%, transparent);
    --music-focus: var(--cd-primary-soft);
    --radio-bg: var(--cd-app-bg);
    --radio-panel: var(--cd-card-bg);
    --radio-border: var(--cd-border);
    --radio-text: var(--cd-text-main);
    --radio-muted: var(--cd-text-muted);
    --radio-accent: var(--cd-primary);
    --radio-accent-strong: var(--cd-primary-deep);
    --jobs-bg: var(--cd-app-bg);
    --jobs-surface: var(--cd-card-bg);
    --jobs-border: var(--cd-border);
    --jobs-muted: var(--cd-text-muted);
    --border: var(--cd-border);
    --muted: var(--cd-text-muted);
    --accent: var(--cd-primary);
    background: var(--cd-app-bg);
    color: var(--cd-text-main);
}
body[data-mobile-section].light-mode { color-scheme: light; --section-accent-text: var(--cd-accent-readable); }
html:has(body[data-mobile-section]) { background: transparent; }
/* These are the shared L3 controls, not a second navigation template. */
body[data-mobile-section] #mobileBottomNav {
    position: fixed;
    z-index: 6000;
}
body[data-mobile-section] .nav-icon-container {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
}
body[data-mobile-section] :is(.music-back, .radio-back) { background: var(--cd-control-bg); color: var(--cd-text-main); }
body[data-mobile-section] :is(.music-section-label, .radio-kicker, .jobs-eyebrow, .job-card > a) { color: var(--section-accent-text); }
body[data-mobile-section] :is(.music-language-badge, .music-play-count, .music-share-button, .music-time-row, .music-member-note, .music-language-option span, .music-track-artist, .music-track-duration, .music-track-like, .music-panel-close) { color: var(--cd-text-muted); }
body[data-mobile-section] :is(.music-language-option span, .music-account-dialog, .music-language-panel, .music-member-note, .music-track) { background-color: var(--cd-control-bg); border-color: var(--cd-border); }
body[data-mobile-section] .music-account-dialog { color: var(--cd-text-main); }
body[data-mobile-section] :is(.music-liked-filter[aria-pressed="true"], .music-language-button[aria-expanded="true"], .music-like-button[aria-pressed="true"], .music-language-option input:checked + span, .music-new-badge) { color: var(--section-accent-text); border-color: var(--cd-primary); }
body[data-mobile-section] .music-tab.active { background: var(--cd-accent-gradient); color: var(--cd-text-on-accent); }
body[data-mobile-section] .music-play-button { background: var(--cd-accent-gradient); color: var(--cd-text-on-accent); }
body[data-mobile-section] :is(.radio-play-pause, .jobs-heading #post-job, .jobs-empty-action, .jobs-market-tabs button[aria-pressed="true"]) { background: var(--cd-accent-gradient); border-color: var(--cd-primary); color: var(--cd-text-on-accent); }
body[data-mobile-section] :is(.radio-play-pause, .jobs-heading #post-job, .jobs-empty-action) { box-shadow: var(--cd-soft-glow); }
body[data-mobile-section] .radio-language { background: var(--cd-control-bg); color: var(--cd-text-main); }
body[data-mobile-section] .radio-language option { background: var(--cd-app-bg); color: var(--cd-text-main); }
body[data-mobile-section] .jobs-header { background: var(--cd-app-bg); }
body[data-mobile-section] :is(.jobs-header > a:last-child, .jobs-heading p, #job-editor, .job-card, dialog, .job-status) { color: var(--cd-text-main); }
body[data-mobile-section] .jobs-heading { background: radial-gradient(circle at 90% 20%, color-mix(in srgb, var(--cd-primary) 20%, transparent), transparent 32%), var(--cd-surface-gradient); border-color: var(--cd-border); }
body[data-mobile-section] :is(.jobs-market-tabs button, #job-market, .secondary, #job-editor input, #job-editor select, #job-editor textarea, dialog select, .job-status) { background: var(--cd-control-bg); border-color: var(--cd-border); color: var(--cd-text-main); }
body[data-mobile-section] :is(.jobs-views [aria-current="page"], .jobs-views [aria-pressed="true"], #job-editor #public-warning) { background: color-mix(in srgb, var(--cd-primary) 12%, var(--cd-card-bg)); border-color: var(--cd-primary); color: var(--section-accent-text); }
body[data-mobile-section] .jobs-empty { background: radial-gradient(circle at top, color-mix(in srgb, var(--cd-primary) 10%, transparent), transparent 60%), var(--cd-card-bg); border-color: var(--cd-border); }
body[data-mobile-section] .jobs-empty-symbol { background: color-mix(in srgb, var(--cd-primary) 16%, transparent); color: var(--section-accent-text); }
body[data-mobile-section] .jobs-empty :is(h2, p) { color: var(--cd-text-main); }
body[data-mobile-section] #jobs-status[data-error="true"] { color: var(--cd-status-danger); }
body[data-mobile-section] .music-track-title { color: var(--cd-text-main); }
body[data-mobile-section] .music-track-row[data-current="true"] .music-track-title,
body[data-mobile-section] .music-track-like[aria-pressed="true"] { color: var(--section-accent-text); }
body[data-mobile-section] :is(.music-track-language, .music-track-share) { color: var(--cd-text-muted); }

body[data-mobile-section] :is(.music-footer, .music-footer strong, .music-account-dialog form > p:not(.music-section-label)) { color: var(--cd-text-muted); }
body[data-mobile-section] :is(.music-dialog-close, .music-language-all, .music-dialog-actions a:last-child, .music-member-actions a:last-child) { background: var(--cd-control-bg); color: var(--cd-text-main); }
body[data-mobile-section] .music-track-row { border-color: var(--cd-border); }
body[data-mobile-section] :is(.music-language-save, .music-empty button, .music-dialog-actions a:first-child, .music-member-actions a:first-child) { background: var(--cd-accent-gradient); color: var(--cd-text-on-accent); }
body[data-mobile-section] :is(.music-shuffle-button[aria-pressed="true"], .music-loop-button[aria-pressed="true"]) { background: var(--cd-accent-gradient); border-color: var(--cd-primary); color: var(--cd-text-on-accent); }
body[data-mobile-section] .radio-play-pause:hover:not(:disabled) { background: var(--cd-primary-soft); }
body[data-mobile-section] .jobs-empty p { color: var(--cd-text-muted); }
body[data-mobile-section] .music-player-status[data-error="true"] { color: var(--cd-status-danger); }
body[data-mobile-section] .music-trending-badge { background: var(--cd-control-bg); border-color: var(--cd-border); color: var(--cd-text-muted); }
body[data-mobile-section] .music-volume-button[aria-pressed="true"] { color: var(--cd-primary-soft); }
body[data-mobile-section] :is(.music-liked-filter[aria-pressed="true"], .music-language-button[aria-expanded="true"]) { box-shadow: 0 0 0 1px var(--cd-primary); }
body[data-mobile-section] .radio-status-mark { box-shadow: 0 0 0 5px color-mix(in srgb, var(--cd-primary) 12%, transparent); }
body[data-mobile-section] :is(.radio-language, .radio-play-pause, .radio-skip-button, .radio-home-link, .radio-back, #job-editor input, #job-editor select, #job-editor textarea):focus-visible { outline-color: var(--cd-primary); }
body[data-mobile-section="jobs"] :is(.job-actions, #job-form) button:not(.secondary) { background: var(--cd-accent-gradient); color: var(--cd-text-on-accent); }

/* Issue 2528: readable labels on the Jobs accent actions in the light app theme. */
body[data-mobile-section] :is(.jobs-heading #post-job, .jobs-empty-action, .jobs-market-tabs button[aria-pressed="true"]),
body[data-mobile-section="jobs"] :is(.job-actions, #job-form) button:not(.secondary) {
    color:#fff;
    -webkit-text-fill-color:#fff;
    text-shadow:0 1px 2px rgba(0,0,0,.65);
}