/* Redesign rollout -- shared foundation for the "new look" dark/card visual system: design tokens (dark default + light override) and every generic, portable primitive (cards, panels, buttons, pills, modals, tables, chips, KPI tiles, forms). Anything genuinely specific to one feature area (PC Monitoring's charts/disk-SMART cards/remediation- script list, etc.) stays in that area's own stylesheet, which @imports this file rather than redefining any of it. Every rule is scoped under .nl-scope and every class is prefixed nl- so this can never collide with, or be affected by, the real static/css/style.css (6000+ lines, its own .panel/.btn/.pill/etc.) loaded on every page including this one. The one exception is the shared `pcm.script_run_status_pill` macro's own `.pill`/`.pill-*` output (see _pc_monitoring_macros.html) -- deliberately not forked, so its old-look classes are restyled here too, but only inside .nl-scope. */ .nl-scope { --nl-ink:#0a0f1c; --nl-surface:#121a2c; --nl-surface-raised:#182339; --nl-surface-hover:#1c2842; --nl-line:#232f4a; --nl-line-soft:#1a2438; --nl-paper:#eef2fa; --nl-muted:#8b97b3; --nl-faint:#5b6785; --nl-brand:#3b82f6; --nl-brand-soft:#152340; --nl-brand-ring:#1e3a66; --nl-good:#22c55e; --nl-good-soft:#123322; --nl-warn:#f5a524; --nl-warn-soft:#3a2a10; --nl-bad:#ef4444; --nl-bad-soft:#3a1616; --nl-info:#14b8a6; --nl-info-soft:#0f2e2b; --nl-violet:#8b5cf6; --nl-violet-soft:#241a3d; --nl-radius-lg:16px; --nl-radius-md:12px; --nl-radius-sm:8px; --nl-font-display:"Manrope",system-ui,-apple-system,"Segoe UI",sans-serif; --nl-font-mono:"JetBrains Mono",ui-monospace,"SF Mono",Consolas,monospace; display:block; background:var(--nl-ink); color:var(--nl-paper); font-family:var(--nl-font-display); line-height:1.5; -webkit-font-smoothing:antialiased; border-radius:var(--nl-radius-lg); padding:22px clamp(16px,3vw,28px) 40px; margin:0 0 24px; } /* As a page's top-level card the scope now sits flush against the nav above and the side/browser edges (style.css's full-bleed .content), so rounded top corners would leave two little wedges of bare page background at the seam. Direct child only: a scope nested inside other markup (e.g. .nl-public-scope, which has no box of its own) is untouched. */ .content > .nl-scope { border-top-left-radius:0; border-top-right-radius:0; } /* Light-theme token override. _theme_init.html always resolves data-theme to a concrete 'light' or 'dark' value before any .nl-scope content can paint (every code path that sets it does so synchronously in , or hardcodes data-theme="light" directly on for the two standalone customer-upload pages) -- so the unattributed dark block above staying the default is correct, not a gap. Specificity: :root[data-theme="light"] .nl-scope is (0,3,0) vs the dark block's (0,1,0) -- this wins outright regardless of source order, no :where()/reordering needed; placed after the dark block purely for readability, matching style.css's own :root / :root[data-theme=light] convention. Values follow the same darken-for-light-backgrounds move style.css's own light theme already makes for its accents (a color with fine contrast on a dark card can fail WCAG AA as text on white), contrast-checked against their paired background/text roles. */ :root[data-theme="light"] .nl-scope { --nl-ink:#eef1f8; --nl-surface:#ffffff; --nl-surface-raised:#e4e9f4; --nl-surface-hover:#d7deec; --nl-line:#d3dae8; --nl-line-soft:#e2e7f1; --nl-paper:#0f1729; --nl-muted:#4b5670; --nl-faint:#7c88a3; --nl-brand:#2563eb; --nl-brand-soft:#dbeafe; --nl-brand-ring:#93c5fd; --nl-good:#15803d; --nl-good-soft:#dcfce7; --nl-warn:#b45309; --nl-warn-soft:#fef3c7; --nl-bad:#b91c1c; --nl-bad-soft:#fee2e2; --nl-info:#0f766e; --nl-info-soft:#ccfbf1; --nl-violet:#6d28d9; --nl-violet-soft:#ede9fe; } .nl-scope *, .nl-scope *::before, .nl-scope *::after { box-sizing:border-box; } /* The real static/css/style.css defines bare-element color rules (h1, p, and label all confirmed by reading style.css directly -- label at "label { ...; color: var(--text-dim); }") that beat inherited color regardless of our selector's specificity -- ANY explicit declaration on the matched element wins over an inherited one, no matter how low its specificity. Every heading, paragraph and label below states color explicitly so ours is the competing declaration, never a value we hoped would merely inherit from .nl-scope -- every