/* ═══════════════════════════════════════════════════════════════════════════ PM NIGHT — SITE BASE 2026-09-27 The dark look for every console page, not just the dashboard. HOW IT SWITCHES: js/pm-look.js puts data-look="night" on before the first paint when the saved look (localStorage pm.canvas.look) is Night. EVERY rule in this file — and in every css/night/.css — sits under html[data-look="night"], so Day is the pages exactly as they were: pick Day on the dashboard (or the sun button in any top bar) and everything returns. The single exception is .pm-lookbtn (the switch itself), which shows in both. THE LANGUAGE (lifted from the dashboard's Night, css/pm-night.css): ground #0A0A0B page ink #FAFAFA what you read first rail #0F0F11 menu column ink-2 #E4E4E7 body copy card #141417 panels mute #A1A1AA supporting text surf #18181B rows in cards faint #71717A meta, labels raise #1B1B1F controls dim #52525B disabled, out-of-range line #27272A hairlines blue #60A5FA "this one" / links line-2 #1F1F23 quiet rules green #34D399 · amber #FBBF24 · red #FB7185 Type: Plus Jakarta Sans for words, JetBrains Mono for figures, dates and small tracked-capital labels. Colour only where it means something. Sections: 1 tokens · 2 page · 3 rail · 4 top bar · 5 the switch · 6 type · 7 cards · 8 controls · 9 tables · 10 odds and ends ═══════════════════════════════════════════════════════════════════════════ */ /* Fonts (Plus Jakarta Sans, JetBrains Mono) are loaded by js/pm-look.js ONLY while Night is on — several Day styles name these faces without loading them, so loading them always would change Day. */ @import url("pm-tones.css?v=20261003f1"); @import url("pm-type.css?v=20260928a"); @import url("pm-badges.css?v=20260928b"); /* one notification badge, every page */ /* the Font choice (Current / Söhne / Nunito) */ /* Night's colour tokens + the Light shade */ @import url("pm-night-components.css?v=20261003f1"); /* the calendar + Family Portfolio, shared */ @import url("pm-ember-desk.css?v=20261003f1"); @import url("pm-ember-light.css?v=20261003f1"); /* 2026-10-03 — Ember Light, the shared pieces by hand (css/pm-ember-light.css) */ /* 2026-10-03 — Ember on every page (css/pm-ember-desk.css; the shapes) */ /* ── 1. tokens ──────────────────────────────────────────────────────────── */ html[data-look="night"] { --n-bg: #0A0A0B; --n-rail: #0F0F11; --n-card: #141417; --n-surf: #18181B; --n-raise: #1B1B1F; --n-hover: #222227; --n-line: #27272A; --n-line-2: #1F1F23; --n-line-3: #3F3F46; --n-ink: #FAFAFA; --n-ink-2: #E4E4E7; --n-mute: #A1A1AA; --n-faint: #71717A; --n-dim: #52525B; --n-blue: #60A5FA; --n-blue-2: #3B82F6; --n-blue-soft: rgb(var(--n-blue-rgb) / .12); --n-green: #34D399; --n-green-soft: rgb(var(--n-green-rgb) / .12); --n-amber: #FBBF24; --n-amber-soft: rgb(var(--n-amber-rgb) / .12); --n-red: #FB7185; --n-red-soft: rgb(var(--n-red-rgb) / .12); --n-violet: #A78BFA; --n-violet-soft: rgb(var(--n-violet-rgb) / .14); --n-font: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, sans-serif; --n-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --n-shadow-pop: 0 0 0 1px var(--n-line), 0 40px 90px -30px var(--n-scrim-p85); color-scheme: dark; } /* the pages' own variables, re-pointed so everything built on them turns too */ html[data-look="night"], html[data-look="night"] body, html[data-look="night"] [data-dash-theme] { --bg: var(--n-bg); --bg-2: var(--n-rail); --card: var(--n-card); --surface: var(--n-card); --panel: var(--n-card); --border: var(--n-line); --border-soft: var(--n-line-2); --line: var(--n-line); --line-2: var(--n-line-2); --hair: var(--n-line); --input-bg: var(--n-raise); --ink: var(--n-ink-2); --ink-2: var(--n-ink); --ink-mute: var(--n-mute); --ink-tert: var(--n-faint); --muted: var(--n-mute); --text: var(--n-ink-2); --text-2: var(--n-mute); --primary: var(--n-blue); --primary-hover: var(--n-blue-hi); --primary-soft: rgb(var(--n-blue-rgb) / .12); --accent: var(--n-blue); } /* the portfolio sheet (pm-night-components.css) speaks the dashboard's --cv-font; give it the same face elsewhere */ html[data-look="night"]:not(.pm-canvas), html[data-look="night"]:not(.pm-canvas) body { --cv-font: var(--n-font); } html.pm-look-fade body, html.pm-look-fade body * { transition: background-color .35s ease, border-color .35s ease, color .35s ease, box-shadow .35s ease !important; } /* ── 2. the page ────────────────────────────────────────────────────────── */ html[data-look="night"]:not(.pm-canvas), html[data-look="night"]:not(.pm-canvas) body { background: var(--n-bg) !important; } html[data-look="night"]:not(.pm-canvas) body:is(.pm-admin-console,.pm-assistant-console) { background: var(--n-bg) !important; color: var(--n-ink-2) !important; font-family: var(--n-font) !important; -webkit-font-smoothing: antialiased; } html[data-look="night"]:not(.pm-canvas) body:is(.pm-admin-console,.pm-assistant-console)::before { background: var(--n-rail) !important; box-shadow: inset -1px 0 0 var(--n-line-2); } html[data-look="night"] ::selection { background: rgb(var(--n-blue-rgb) / .32); color: #fff; } html[data-look="night"] body :is(main, .nx-shell, .nx-main, .admin-shell) { scrollbar-color: var(--n-line-3) transparent; } html[data-look="night"] ::-webkit-scrollbar-thumb { background: var(--n-thumb); border-radius: 8px; border: 2px solid transparent; background-clip: padding-box; } html[data-look="night"] ::-webkit-scrollbar-track { background: transparent; } /* admin-type.css pins Nunito on page content with a long selector — this one is one step longer, so Night speaks the dashboard's face everywhere */ html[data-look="night"]:not(.pm-canvas) body:is(.pm-admin-console,.pm-assistant-console) :is(.nx-shell, .nx-main, main, .pmar-main, .adp, .ado) *:not(:is(code, pre, kbd, samp, .material-icons, [class*="icon"], [class*="mono"], [class*="__id"])) { font-family: var(--n-font) !important; } html[data-look="night"]:not(.pm-canvas) body:is(.pm-admin-console,.pm-assistant-console) :is(code, pre, kbd, samp) { font-family: var(--n-mono) !important; } /* ── 3. the rail — the dashboard's Night menu, on every page ────────────── */ html[data-look="night"]:not(.pm-canvas) .pmar { background: var(--n-rail) !important; box-shadow: inset -1px 0 0 var(--n-line-2) !important; font-family: var(--n-font) !important; } html[data-look="night"]:not(.pm-canvas) .pmar::before, html[data-look="night"]:not(.pm-canvas) .pmar::after { display: none !important; } html[data-look="night"]:not(.pm-canvas) .pmar__brand { padding: 22px 20px 20px !important; } html[data-look="night"]:not(.pm-canvas) .pmar__mark { width: 38px !important; height: 38px !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; background: url("../assets/logos/pm-mark-new.png") center / contain no-repeat !important; } html[data-look="night"]:not(.pm-canvas) .pmar__mark > * { display: none !important; } html[data-look="night"]:not(.pm-canvas) .pmar__wm b { color: var(--n-ink) !important; font-weight: 700 !important; letter-spacing: -.01em; } html[data-look="night"]:not(.pm-canvas) .pmar__wm span { color: var(--n-dim) !important; font-size: 10.5px !important; letter-spacing: .14em !important; } html[data-look="night"]:not(.pm-canvas) .pmar__grp { color: var(--n-dim) !important; font-size: 10.5px !important; font-weight: 600 !important; letter-spacing: .14em !important; } html[data-look="night"]:not(.pm-canvas) .pmar__item { color: var(--n-mute) !important; font-size: 14px !important; font-weight: 500 !important; border-radius: 11px !important; } html[data-look="night"]:not(.pm-canvas) .pmar__ico svg { color: var(--n-faint) !important; } html[data-look="night"]:not(.pm-canvas) .pmar__item:hover { background: rgb(var(--n-ov) / .045) !important; color: var(--n-ink) !important; } html[data-look="night"]:not(.pm-canvas) .pmar__item:hover .pmar__ico svg { color: var(--n-ink) !important; } html[data-look="night"]:not(.pm-canvas) .pmar__item.is-active { background: var(--n-raise) !important; color: var(--n-ink) !important; font-weight: 600 !important; box-shadow: inset 0 0 0 1px var(--n-line) !important; } html[data-look="night"]:not(.pm-canvas) .pmar__item.is-active .pmar__ico svg { color: var(--n-blue) !important; } html[data-look="night"]:not(.pm-canvas) .pmar__chev { color: var(--n-dim) !important; } html[data-look="night"]:not(.pm-canvas) .pmar__row.is-open > .pmar__item .pmar__chev, html[data-look="night"]:not(.pm-canvas) .pmar__item.is-active .pmar__chev { color: var(--n-faint) !important; } html[data-look="night"]:not(.pm-canvas) .pmar__badge { background: var(--n-blue-2) !important; color: #fff !important; box-shadow: none !important; font-family: var(--n-mono) !important; font-weight: 500 !important; } html[data-look="night"]:not(.pm-canvas) .pmar__sub::before { background: var(--n-line) !important; } html[data-look="night"]:not(.pm-canvas) .pmar__sublink { color: var(--n-faint) !important; font-size: 13.5px !important; } html[data-look="night"]:not(.pm-canvas) .pmar__sublink::before { background: var(--n-line-3) !important; border-color: var(--n-rail) !important; } html[data-look="night"]:not(.pm-canvas) .pmar__sublink:hover { color: var(--n-ink) !important; background: rgb(var(--n-ov) / .04) !important; } html[data-look="night"]:not(.pm-canvas) .pmar__sublink:hover::before { background: var(--n-mute) !important; } html[data-look="night"]:not(.pm-canvas) .pmar__sublink.is-active { color: var(--n-blue) !important; font-weight: 600 !important; } html[data-look="night"]:not(.pm-canvas) .pmar__sublink.is-active::before { background: var(--n-blue) !important; box-shadow: 0 0 0 3px rgb(var(--n-blue-rgb) / .2) !important; } html[data-look="night"]:not(.pm-canvas) :is(.pmar__sublink--all, .pmar__loading) { color: var(--n-dim) !important; } html[data-look="night"]:not(.pm-canvas) .pmar__subhead { color: var(--n-dim) !important; } html[data-look="night"]:not(.pm-canvas) .pmar__foot { border-top: 1px solid var(--n-line-2); } html[data-look="night"]:not(.pm-canvas) .pmar__out { background: transparent !important; border: 1px solid var(--n-line) !important; color: var(--n-mute) !important; font-weight: 500 !important; } html[data-look="night"]:not(.pm-canvas) .pmar__out:hover { background: rgb(var(--n-red-rgb) / .08) !important; border-color: rgb(var(--n-red-rgb) / .3) !important; color: var(--n-red) !important; } /* ── 4. the top bar ─────────────────────────────────────────────────────── */ html[data-look="night"]:not(.pm-canvas) body:is(.pm-admin-console,.pm-assistant-console) .nx-topbar { background: rgb(var(--n-bg-rgb) / .82) !important; -webkit-backdrop-filter: saturate(1.4) blur(16px); backdrop-filter: saturate(1.4) blur(16px); border-bottom: 1px solid var(--n-line-2) !important; box-shadow: none !important; } html[data-look="night"]:not(.pm-canvas) body:is(.pm-admin-console,.pm-assistant-console) .nx-topbar::before { display: none !important; } html[data-look="night"]:not(.pm-canvas) body:is(.pm-admin-console,.pm-assistant-console) .nx-search input { background: var(--n-card) !important; border: 1px solid var(--n-line) !important; color: var(--n-ink) !important; font-family: var(--n-font) !important; } html[data-look="night"]:not(.pm-canvas) body:is(.pm-admin-console,.pm-assistant-console) .nx-search input::placeholder { color: var(--n-dim) !important; } html[data-look="night"]:not(.pm-canvas) body:is(.pm-admin-console,.pm-assistant-console) .nx-search input:hover { border-color: var(--n-line-3) !important; } html[data-look="night"]:not(.pm-canvas) body:is(.pm-admin-console,.pm-assistant-console) .nx-search input:focus { background: var(--n-surf) !important; border-color: rgb(var(--n-blue-rgb) / .5) !important; box-shadow: 0 0 0 4px rgb(var(--n-blue-rgb) / .1) !important; } html[data-look="night"]:not(.pm-canvas) body:is(.pm-admin-console,.pm-assistant-console) .nx-search svg { color: var(--n-faint) !important; z-index: 1001 !important; } /* master-search lifts the field to 1000 */ html[data-look="night"]:not(.pm-canvas) body:is(.pm-admin-console,.pm-assistant-console) .nx-topbar [data-pm-install] { background: var(--n-raise) !important; border: 1px solid var(--n-line) !important; color: var(--n-ink-2) !important; } html[data-look="night"]:not(.pm-canvas) body:is(.pm-admin-console,.pm-assistant-console) .nx-userpod { background: var(--n-card) !important; border: 1px solid var(--n-line) !important; box-shadow: none !important; } html[data-look="night"]:not(.pm-canvas) body:is(.pm-admin-console,.pm-assistant-console) .nx-userpod:hover { border-color: var(--n-line-3) !important; } html[data-look="night"]:not(.pm-canvas) body:is(.pm-admin-console,.pm-assistant-console) .nx-userpod__name { color: var(--n-ink) !important; font-family: var(--n-font) !important; font-weight: 600 !important; } html[data-look="night"]:not(.pm-canvas) body:is(.pm-admin-console,.pm-assistant-console) .nx-userpod__avatar { box-shadow: 0 0 0 2px var(--n-bg) !important; } /* ── 5. the switch (BOTH looks — it is how you get back to Day) ───────── js/pm-look.js puts it in the menu footer, to the left of Sign out. */ .pmar__foot.pmar__foot--look { display: flex; gap: 8px; align-items: stretch; } .pmar__foot--look .pmar__out { flex: 1; min-width: 0; } .pm-lookbtn { width: 44px; flex: none; border-radius: 11px; padding: 0; cursor: pointer; display: grid; place-items: center; position: relative; background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.17); color: rgba(255,255,255,.85); transition: background .16s cubic-bezier(.4,0,.2,1), border-color .16s ease, color .16s ease; } .pm-lookbtn:hover { background: rgba(255,255,255,.16); color: #fff; } .pm-lookbtn:focus-visible { outline: 2px solid #9CC9FA; outline-offset: 2px; } .pm-lookbtn svg { width: 17px; height: 17px; transition: transform .45s cubic-bezier(.2,.8,.2,1); } .pm-lookbtn:active svg { transform: rotate(-30deg) scale(.9); } html[data-look="night"] .pm-lookbtn { background: transparent; border-color: var(--n-line); color: var(--n-mute); } html[data-look="night"] .pm-lookbtn:hover { background: var(--n-raise); border-color: var(--n-line-3); color: var(--n-ink); } @media (prefers-reduced-motion: reduce) { .pm-lookbtn svg { transition: none; } } /* ── 6. type ────────────────────────────────────────────────────────────── */ html[data-look="night"]:not(.pm-canvas) body:is(.pm-admin-console,.pm-assistant-console) :is(.nx-h1, main h1) { color: var(--n-ink) !important; font-weight: 600 !important; letter-spacing: -.02em !important; } html[data-look="night"]:not(.pm-canvas) body:is(.pm-admin-console,.pm-assistant-console) :is(main h2, main h3, main h4) { color: var(--n-ink) !important; } html[data-look="night"]:not(.pm-canvas) body:is(.pm-admin-console,.pm-assistant-console) :is(.nx-sub, main p) { color: var(--n-mute); } html[data-look="night"]:not(.pm-canvas) body:is(.pm-admin-console,.pm-assistant-console) .nx-sub { color: var(--n-mute) !important; } html[data-look="night"]:not(.pm-canvas) body:is(.pm-admin-console,.pm-assistant-console) :is(.nx-card__title, .adp-card__title, .ado-card__title, .ir-h) { color: var(--n-ink) !important; } html[data-look="night"]:not(.pm-canvas) body:is(.pm-admin-console,.pm-assistant-console) :is(.nx-card__sub, .adp-card__sub, .ado-card__sub, .ir-sub) { color: var(--n-faint) !important; } html[data-look="night"]:not(.pm-canvas) body:is(.pm-admin-console,.pm-assistant-console) main a:not([class]) { color: var(--n-blue); } html[data-look="night"]:not(.pm-canvas) body:is(.pm-admin-console,.pm-assistant-console) main a:not([class]):hover { color: var(--n-blue-hi); } html[data-look="night"]:not(.pm-canvas) body:is(.pm-admin-console,.pm-assistant-console) main :is(strong, b) { color: inherit; } html[data-look="night"]:not(.pm-canvas) body:is(.pm-admin-console,.pm-assistant-console) main hr { border-color: var(--n-line) !important; background: var(--n-line) !important; } /* ── 7. cards ───────────────────────────────────────────────────────────── */ html[data-look="night"]:not(.pm-canvas) body:is(.pm-admin-console,.pm-assistant-console) :is(.nx-card, .adp-card, .ado-card, .nx-stats) { background: var(--n-card) !important; border: 1px solid var(--n-line) !important; box-shadow: none !important; color: var(--n-ink-2) !important; } html[data-look="night"]:not(.pm-canvas) body:is(.pm-admin-console,.pm-assistant-console) .nx-stats__num { color: var(--n-ink) !important; font-family: var(--n-mono) !important; font-weight: 400 !important; letter-spacing: -.03em !important; } html[data-look="night"]:not(.pm-canvas) body:is(.pm-admin-console,.pm-assistant-console) .nx-stats__label { color: var(--n-faint) !important; font-family: var(--n-mono) !important; font-weight: 400 !important; letter-spacing: .1em !important; } html[data-look="night"]:not(.pm-canvas) body:is(.pm-admin-console,.pm-assistant-console) .nx-head__cta { background: var(--n-ink) !important; border-color: var(--n-ink) !important; color: var(--n-bg) !important; } html[data-look="night"]:not(.pm-canvas) body:is(.pm-admin-console,.pm-assistant-console) .nx-head__cta:hover { background: var(--n-ink-hi) !important; border-color: var(--n-ink-hi) !important; } /* ── 8. controls — a sensible dark default; pages refine in their own sheet ─ */ html[data-look="night"]:not(.pm-canvas) body:is(.pm-admin-console,.pm-assistant-console) :where(main, .nx-shell, [role="dialog"], [class*="modal"], [class*="drawer"]) :where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]), select, textarea) { background-color: var(--n-raise) !important; color: var(--n-ink) !important; border-color: var(--n-line) !important; box-shadow: none; } html[data-look="night"]:not(.pm-canvas) body:is(.pm-admin-console,.pm-assistant-console) :where(input, select, textarea)::placeholder { color: var(--n-dim) !important; } html[data-look="night"]:not(.pm-canvas) body:is(.pm-admin-console,.pm-assistant-console) :where(input, select, textarea):focus { border-color: rgb(var(--n-blue-rgb) / .55) !important; outline: none; box-shadow: 0 0 0 3px rgb(var(--n-blue-rgb) / .14) !important; } html[data-look="night"]:not(.pm-canvas) body:is(.pm-admin-console,.pm-assistant-console) :where(input[type="checkbox"], input[type="radio"]) { accent-color: var(--n-blue); } html[data-look="night"]:not(.pm-canvas) body:is(.pm-admin-console,.pm-assistant-console) select option { background: var(--n-surf); color: var(--n-ink); } html[data-look="night"]:not(.pm-canvas) body:is(.pm-admin-console,.pm-assistant-console) :where(input[type="date"], input[type="time"], input[type="datetime-local"], input[type="month"])::-webkit-calendar-picker-indicator { filter: invert(.8); } /* ── 9. tables ──────────────────────────────────────────────────────────── */ html[data-look="night"]:not(.pm-canvas) body:is(.pm-admin-console,.pm-assistant-console) :where(main) :where(table) { color: var(--n-ink-2); border-color: var(--n-line) !important; } html[data-look="night"]:not(.pm-canvas) body:is(.pm-admin-console,.pm-assistant-console) :where(main) :where(th) { background-color: transparent; color: var(--n-faint) !important; border-color: var(--n-line) !important; } html[data-look="night"]:not(.pm-canvas) body:is(.pm-admin-console,.pm-assistant-console) :where(main) :where(td) { border-color: var(--n-line-2) !important; } /* ── 10. odds and ends ──────────────────────────────────────────────────── */ html[data-look="night"]:not(.pm-canvas) body:is(.pm-admin-console,.pm-assistant-console) :where(.skeleton, [class*="skel"]) { background-color: var(--n-surf) !important; } /* ── 11. the search panel (js/master-search.js — every page's search box) ── Results on the left, a preview on the right, a browse gallery when empty, plus the quick modal and the detail drawer it can open. */ html[data-look="night"] body .ms-backdrop { background: var(--n-scrim-p5) !important; } html[data-look="night"] body .ms-spinner { border-color: var(--n-line-3) !important; border-top-color: var(--n-blue) !important; } html[data-look="night"] body .ms-panel { background: var(--n-card) !important; border: 0 !important; box-shadow: var(--n-shadow-pop) !important; border-radius: 16px !important; font-family: var(--n-font) !important; } html[data-look="night"] body .ms-panel__preview { background: var(--n-well) !important; border-left: 1px solid var(--n-line) !important; } html[data-look="night"] body :is(.ms-summary, .ms-browse-head) { background: var(--n-card) !important; border-bottom: 1px solid var(--n-line) !important; } html[data-look="night"] body .ms-summary__total { color: var(--n-faint) !important; font-family: var(--n-mono) !important; font-size: 11.5px !important; } html[data-look="night"] body :is(.ms-summary__total strong, .ms-filter-prompt strong) { background: none !important; -webkit-background-clip: border-box !important; background-clip: border-box !important; color: var(--n-ink) !important; animation: none !important; } html[data-look="night"] body .ms-chip { background: transparent !important; border: 1px solid var(--n-line) !important; box-shadow: none !important; color: var(--n-mute) !important; font-weight: 500 !important; border-radius: 8px !important; } html[data-look="night"] body .ms-chip:hover { background: var(--n-raise) !important; border-color: var(--n-line-3) !important; color: var(--n-ink) !important; box-shadow: none !important; } html[data-look="night"] body .ms-chip.is-active { background: var(--n-ink) !important; border-color: var(--n-ink) !important; color: var(--n-bg) !important; box-shadow: none !important; } html[data-look="night"] body .ms-chip__n { background: var(--n-chip) !important; color: var(--n-mute) !important; font-family: var(--n-mono) !important; font-weight: 400 !important; } html[data-look="night"] body .ms-chip.is-active .ms-chip__n { background: rgb(var(--n-bg-rgb) / .1) !important; color: var(--n-bg) !important; } html[data-look="night"] body .ms-subchips { border-bottom-color: var(--n-line) !important; } html[data-look="night"] body .ms-subchip { color: var(--n-faint) !important; } html[data-look="night"] body .ms-subchip:hover { background: var(--n-raise) !important; color: var(--n-ink) !important; } html[data-look="night"] body .ms-subchip.is-active { background: var(--n-blue-soft) !important; border-color: rgb(var(--n-blue-rgb) / .3) !important; color: var(--n-blue) !important; } html[data-look="night"] body .ms-subchip.is-active .ms-chip__n { background: rgb(var(--n-blue-rgb) / .16) !important; color: var(--n-blue) !important; } html[data-look="night"] body :is(.ms-empty-header, .ms-section__head, .ms-gallery-grouphead) { color: var(--n-faint) !important; font-family: var(--n-mono) !important; font-weight: 400 !important; letter-spacing: .1em !important; } html[data-look="night"] body :is(.ms-empty-sub, .ms-section__count, .ms-ago, .ms-filter-prompt, .ms-empty) { color: var(--n-faint) !important; } html[data-look="night"] body :is(.ms-section__count, .ms-ago) { font-family: var(--n-mono) !important; } html[data-look="night"] body .ms-browse-title { color: var(--n-ink) !important; } html[data-look="night"] body .ms-browse-note { background: var(--n-amber-soft) !important; border-color: transparent !important; color: var(--n-amber) !important; } html[data-look="night"] body .ms-gallery-card { background: var(--n-surf) !important; border: 1px solid var(--n-line) !important; box-shadow: none !important; transform: none !important; } html[data-look="night"] body .ms-gallery-card::before { display: none !important; } html[data-look="night"] body .ms-gallery-card:hover { background: var(--n-raise) !important; border-color: var(--n-line-3) !important; } html[data-look="night"] body .ms-gallery-card__icon { background: var(--n-raise) !important; color: var(--n-mute) !important; box-shadow: inset 0 0 0 1px var(--n-line) !important; } html[data-look="night"] body .ms-gallery-card:hover .ms-gallery-card__icon { background: var(--n-blue-soft) !important; color: var(--n-blue) !important; } html[data-look="night"] body .ms-gallery-card__label { color: var(--n-ink) !important; } html[data-look="night"] body .ms-gallery-card__hint { color: var(--n-faint) !important; } html[data-look="night"] body .ms-gallery-card .ms-spark { display: none !important; } html[data-look="night"] body .ms-item { border-bottom-color: var(--n-line-2) !important; } html[data-look="night"] body .ms-item::before { background: var(--n-blue) !important; } html[data-look="night"] body :is(.ms-item:hover, .ms-item.is-selected) { background: rgb(var(--n-ov) / .035) !important; } html[data-look="night"] body .ms-item__icon { color: var(--n-faint) !important; } html[data-look="night"] body :is(.ms-item:hover, .ms-item.is-selected) .ms-item__icon { color: var(--n-blue) !important; } html[data-look="night"] body .ms-item__title { color: var(--n-ink) !important; font-weight: 600 !important; } html[data-look="night"] body :is(.ms-item:hover, .ms-item.is-selected) .ms-item__title { color: var(--n-ink) !important; } html[data-look="night"] body .ms-item__sub { color: var(--n-faint) !important; } html[data-look="night"] body .ms-badge { background: var(--n-chip) !important; color: var(--n-mute) !important; transform: none !important; } html[data-look="night"] body :is(.ms-item:hover, .ms-item.is-selected) .ms-badge { background: var(--n-blue-soft) !important; color: var(--n-blue) !important; } html[data-look="night"] body .ms-mark { background: rgb(var(--n-amber-rgb) / .22) !important; color: var(--n-ink) !important; } html[data-look="night"] body .ms-more { color: var(--n-blue) !important; } html[data-look="night"] body .ms-more:hover { background: rgb(var(--n-ov) / .03) !important; } html[data-look="night"] body .ms-preview__placeholder { color: var(--n-faint) !important; } html[data-look="night"] body .ms-preview__placeholder-title { color: var(--n-ink-2) !important; } html[data-look="night"] body :is(.ms-pv__head, .ms-pv__foot) { background: var(--n-well) !important; border-color: var(--n-line) !important; } html[data-look="night"] body :is(.ms-pv__title, .ms-modal__title, .ms-drawer__title) { color: var(--n-ink) !important; font-weight: 600 !important; } html[data-look="night"] body :is(.ms-pv__meta, .ms-modal__sub, .ms-drawer__sub) { color: var(--n-faint) !important; } html[data-look="night"] body :is(.ms-pv__lbl, .ms-drawer__lbl) { color: var(--n-faint) !important; font-family: var(--n-mono) !important; font-weight: 400 !important; letter-spacing: .08em !important; } html[data-look="night"] body :is(.ms-pv__val, .ms-pv__body, .ms-drawer__val) { color: var(--n-ink-2) !important; } html[data-look="night"] body .ms-pv__block { border-top-color: var(--n-line) !important; } html[data-look="night"] body :is(.ms-pv__btn--primary, .ms-modal__btn--primary, .ms-drawer__btn--primary) { background: var(--n-ink) !important; color: var(--n-bg) !important; border-color: var(--n-ink) !important; } html[data-look="night"] body :is(.ms-pv__btn--primary, .ms-modal__btn--primary, .ms-drawer__btn--primary):hover { background: var(--n-ink-hi) !important; } html[data-look="night"] body :is(.ms-pv__btn--ghost, .ms-modal__btn--ghost, .ms-drawer__btn--ghost) { background: var(--n-raise) !important; color: var(--n-ink-2) !important; border-color: var(--n-line) !important; } html[data-look="night"] body :is(.ms-pv__btn--ghost, .ms-modal__btn--ghost, .ms-drawer__btn--ghost):hover { background: var(--n-hover) !important; color: var(--n-ink) !important; } html[data-look="night"] body :is(.ms-modal__backdrop, .ms-drawer__backdrop) { background: var(--n-scrim-p7) !important; } html[data-look="night"] body :is(.ms-modal__card, .ms-drawer__card) { background: var(--n-card) !important; box-shadow: var(--n-shadow-pop) !important; } html[data-look="night"] body :is(.ms-drawer__head, .ms-drawer__foot) { border-color: var(--n-line) !important; } html[data-look="night"] body .ms-drawer__foot { background: var(--n-well) !important; } html[data-look="night"] body .ms-drawer__row { border-bottom-color: var(--n-line-2) !important; } html[data-look="night"] body .ms-drawer__close { color: var(--n-mute) !important; } html[data-look="night"] body .ms-drawer__close:hover { background: var(--n-raise) !important; color: var(--n-ink) !important; } /* ── 12. "Pick what happened" — the log-a-session window (js/session-resolve.js) Dashboard + lesson tracker. The orbit keeps its blue centre (it is the session); the six choices become dark discs, and the form sheet that opens on top is a Night panel. */ html[data-look="night"] body .pmsr-overlay { background: radial-gradient(circle at center, rgb(var(--n-bg-rgb) / .62) 0%, rgb(var(--n-bg-rgb) / .88) 100%) !important; } html[data-look="night"] body .pmsr-ring { border-color: rgb(var(--n-ov) / .12) !important; box-shadow: none !important; } html[data-look="night"] body .pmsr-ring--outer { border-color: rgb(var(--n-ov) / .06) !important; } html[data-look="night"] body .pmsr-node { background: var(--n-surf) !important; box-shadow: 0 0 0 1px var(--n-line-3), 0 14px 30px -10px var(--n-sh-p9) !important; } html[data-look="night"] body :is(.pmsr-node:hover, .pmsr-node:focus-visible) { background: var(--node-color, var(--n-blue-2)) !important; box-shadow: 0 0 0 3px var(--node-glow, rgb(var(--n-blue2-rgb) / .45)), 0 18px 36px -10px var(--n-sh-p9) !important; } html[data-look="night"] body .pmsr-node__label { color: var(--n-ink-2) !important; font-family: var(--n-font) !important; } html[data-look="night"] body .pmsr-hint { color: var(--n-faint) !important; font-family: var(--n-mono) !important; } html[data-look="night"] body .pmsr-hint kbd { background: var(--n-raise) !important; border-color: var(--n-line) !important; color: var(--n-ink-2) !important; font-family: var(--n-mono) !important; } html[data-look="night"] body .pmsr-sheet { font-family: var(--n-font) !important; } html[data-look="night"] body .pmsr-sheet__bg { background: var(--n-scrim-p7) !important; } html[data-look="night"] body .pmsr-panel { background: var(--n-card) !important; box-shadow: var(--n-shadow-pop) !important; } html[data-look="night"] body .pmsr-head { border-bottom-color: var(--n-line) !important; } html[data-look="night"] body .pmsr-head__title { color: var(--n-ink) !important; font: 600 18px/1.25 var(--n-font) !important; } html[data-look="night"] body .pmsr-head__sub { color: var(--n-faint) !important; font-family: var(--n-font) !important; } html[data-look="night"] body .pmsr-x { background: var(--n-raise) !important; color: var(--n-mute) !important; box-shadow: inset 0 0 0 1px var(--n-line) !important; } html[data-look="night"] body .pmsr-x:hover { background: var(--n-hover) !important; color: var(--n-ink) !important; } html[data-look="night"] body .pmsr-legend { color: var(--n-faint) !important; font: 400 11px var(--n-mono) !important; letter-spacing: .1em !important; } html[data-look="night"] body .pmsr-choice { border: 1px solid var(--n-line) !important; background: var(--n-surf) !important; } html[data-look="night"] body .pmsr-choice:hover { border-color: var(--n-line-3) !important; background: var(--n-raise) !important; } html[data-look="night"] body .pmsr-choice:has(input:checked) { border-color: rgb(var(--n-blue-rgb) / .55) !important; background: var(--n-blue-soft) !important; box-shadow: 0 0 0 3px rgb(var(--n-blue-rgb) / .1) !important; } html[data-look="night"] body .pmsr-choice:has(input[value="no-show"]:checked) { border-color: rgb(var(--n-amber-rgb) / .5) !important; background: var(--n-amber-soft) !important; box-shadow: 0 0 0 3px rgb(var(--n-amber-rgb) / .08) !important; } html[data-look="night"] body .pmsr-choice input[type="radio"] { accent-color: var(--n-blue) !important; } html[data-look="night"] body .pmsr-choice__label { color: var(--n-ink) !important; font: 600 14px/1.3 var(--n-font) !important; } html[data-look="night"] body :is(.pmsr-choice__hint, .pmsr-src__sub, .pmsr-sugg) { color: var(--n-faint) !important; font-family: var(--n-font) !important; } html[data-look="night"] body .pmsr-block { background: var(--n-surf) !important; border-color: var(--n-line) !important; } html[data-look="night"] body .pmsr-src { background: var(--n-card) !important; border-color: var(--n-line) !important; } html[data-look="night"] body .pmsr-src.is-used { border-color: rgb(var(--n-blue-rgb) / .55) !important; box-shadow: 0 0 0 3px rgb(var(--n-blue-rgb) / .1) !important; } html[data-look="night"] body .pmsr-src__name { color: var(--n-ink) !important; font-family: var(--n-font) !important; font-weight: 600 !important; } html[data-look="night"] body .pmsr-src__tag { background: var(--n-blue-soft) !important; color: var(--n-blue) !important; } html[data-look="night"] body :is(.pmsr-src input, .pmsr-field select, .pmsr-field textarea, .pmsr-field input) { background: var(--n-raise) !important; border-color: var(--n-line) !important; color: var(--n-ink) !important; font-family: var(--n-font) !important; } html[data-look="night"] body .pmsr-src input { font-family: var(--n-mono) !important; } html[data-look="night"] body :is(.pmsr-field select, .pmsr-field textarea, .pmsr-field input, .pmsr-src input):focus { border-color: rgb(var(--n-blue-rgb) / .55) !important; box-shadow: 0 0 0 3px rgb(var(--n-blue-rgb) / .14) !important; } html[data-look="night"] body .pmsr-src__unit { color: var(--n-faint) !important; } html[data-look="night"] body .pmsr-total { background: var(--n-raise) !important; color: var(--n-ink-2) !important; font-family: var(--n-mono) !important; font-weight: 400 !important; } html[data-look="night"] body .pmsr-total.is-bad { background: var(--n-red-soft) !important; color: var(--n-red) !important; } html[data-look="night"] body .pmsr-total.is-good { background: var(--n-green-soft) !important; color: var(--n-green) !important; } html[data-look="night"] body .pmsr-sugg button { color: var(--n-blue) !important; } html[data-look="night"] body .pmsr-field__label { color: var(--n-mute) !important; font-family: var(--n-font) !important; font-weight: 600 !important; } html[data-look="night"] body .pmsr-field__opt { color: var(--n-dim) !important; } html[data-look="night"] body .pmsr-note { background: var(--n-surf) !important; border-color: var(--n-line) !important; color: var(--n-mute) !important; font-family: var(--n-font) !important; } html[data-look="night"] body .pmsr-note strong { color: var(--n-ink) !important; } html[data-look="night"] body .pmsr-error { background: var(--n-red-soft) !important; border-color: rgb(var(--n-red-rgb) / .3) !important; color: var(--n-red) !important; } html[data-look="night"] body .pmsr-ok { background: var(--n-green-soft) !important; border-color: rgb(var(--n-green-rgb) / .3) !important; color: var(--n-green) !important; } html[data-look="night"] body .pmsr-actions { border-top-color: var(--n-line) !important; } html[data-look="night"] body .pmsr-btn { font-family: var(--n-font) !important; font-weight: 600 !important; border-radius: 10px !important; } html[data-look="night"] body .pmsr-btn--ghost { background: var(--n-raise) !important; color: var(--n-ink-2) !important; border: 0 !important; box-shadow: inset 0 0 0 1px var(--n-line) !important; } html[data-look="night"] body .pmsr-btn--ghost:hover { background: var(--n-hover) !important; color: var(--n-ink) !important; } html[data-look="night"] body .pmsr-btn--primary { background: var(--n-ink) !important; color: var(--n-bg) !important; box-shadow: none !important; } html[data-look="night"] body .pmsr-btn--primary:hover:not([disabled]) { background: var(--n-ink-hi) !important; } html[data-look="night"] body .pmsr-btn--go { background: #10B981 !important; color: #04130D !important; box-shadow: none !important; } html[data-look="night"] body .pmsr-btn--go:hover:not([disabled]) { background: #34D399 !important; } html[data-look="night"] body .pmsr-btn--danger { background: transparent !important; color: var(--n-red) !important; box-shadow: inset 0 0 0 1px rgb(var(--n-red-rgb) / .4) !important; } html[data-look="night"] body .pmsr-btn--danger:hover:not([disabled]) { background: rgb(var(--n-red-rgb) / .1) !important; } /* ── 13. the language flag menu (js/pm-i18n.js) — lifted from the Messages sheet Caleb's flag art stays; only its frame and menu turn. */ html[data-look="night"] body:is(.pm-admin-console,.pm-assistant-console) .nx-topbar [data-pm-install]:hover { background: var(--n-hover) !important; border-color: var(--n-line-3) !important; color: var(--n-ink) !important; box-shadow: none !important; } /* the language flag (Caleb's flag art stays; only its frame + menu turn) */ html[data-look="night"] body:is(.pm-admin-console,.pm-assistant-console) .pmlang__btn { background: var(--n-raise) !important; border-color: var(--n-line) !important; box-shadow: none !important; } html[data-look="night"] body:is(.pm-admin-console,.pm-assistant-console) .pmlang__btn:hover { border-color: var(--n-line-3) !important; transform: none; } html[data-look="night"] body:is(.pm-admin-console,.pm-assistant-console) .pmlang.is-open .pmlang__btn { border-color: var(--n-line-3) !important; box-shadow: 0 0 0 3px rgb(var(--n-blue-rgb) / .22) !important; } html[data-look="night"] body:is(.pm-admin-console,.pm-assistant-console) .pmlang__menu { background: var(--n-card) !important; border-color: var(--n-line) !important; box-shadow: var(--n-shadow-pop) !important; border-radius: 16px !important; } html[data-look="night"]:not(.pm-canvas) body:is(.pm-admin-console,.pm-assistant-console) :is(.pmlang__head, #pm-n) { color: var(--n-faint) !important; font-family: var(--n-mono) !important; font-weight: 400 !important; font-size: 11px !important; letter-spacing: .1em !important; text-transform: uppercase; } html[data-look="night"] body:is(.pm-admin-console,.pm-assistant-console) .pmlang__item { background: var(--n-surf) !important; border-color: var(--n-line) !important; box-shadow: none !important; } html[data-look="night"] body:is(.pm-admin-console,.pm-assistant-console) .pmlang__item:hover { background: var(--n-hover) !important; border-color: var(--n-line-3) !important; } html[data-look="night"] body:is(.pm-admin-console,.pm-assistant-console) .pmlang__item.is-active { background: var(--n-blue-soft) !important; border-color: rgb(var(--n-blue-rgb) / .3) !important; } html[data-look="night"] body:is(.pm-admin-console,.pm-assistant-console) :is(.pmlang__native, #pm-n) { color: var(--n-ink-2) !important; font-weight: 600 !important; } html[data-look="night"] body:is(.pm-admin-console,.pm-assistant-console) .pmlang__item.is-active :is(.pmlang__native, #pm-n) { color: var(--n-ink) !important; } html[data-look="night"] body:is(.pm-admin-console,.pm-assistant-console) .pmlang__check { background: var(--n-blue) !important; color: var(--n-bg) !important; border-color: var(--n-card) !important; box-shadow: none !important; } /* ── 14. the live-visitors chip (js/admin-live.js — dashboard, Visitors, Waiting List), lifted from the Waiting List sheet. The icon is inverted so it reads on dark. */ html[data-look="night"] body:not(#n) #pmLiveChip .pm-live { background: var(--n-raise); border: 1px solid var(--n-line); color: var(--n-ink-2); height: 36px; } html[data-look="night"] body:not(#n) #pmLiveChip .pm-live:hover { border-color: var(--n-line-3); background: var(--n-hover); box-shadow: none; } html[data-look="night"] body:not(#n) #pmLiveChip .pm-live.is-paused { border-style: dashed; color: var(--n-faint); } html[data-look="night"] body:not(#n) #pmLiveChip .pm-live__ico { filter: invert(.88); } html[data-look="night"] body:not(#n) #pmLiveChip .pm-live span.l { color: var(--n-mute); } html[data-look="night"] body:not(#n) #pmLiveChip .pm-live b { font-family: var(--n-mono) !important; font-weight: 400; } html[data-look="night"] body:not(#n) #pmLiveChip .pm-live__today b { color: var(--n-ink); } html[data-look="night"] body:not(#n) #pmLiveChip .pm-live__badge { background: var(--n-green-deep); color: var(--n-green); box-shadow: 0 0 0 2px var(--n-raise); font-family: var(--n-mono) !important; font-weight: 400; } html[data-look="night"] body:not(#n) #pmLiveChip .pm-live__dot { background: var(--n-green); } html[data-look="night"] body:not(#n) #pmLiveChip .pm-live__card { background: var(--n-card); border: 0; box-shadow: var(--n-shadow-pop); color: var(--n-ink-2); } html[data-look="night"] body:not(#n) #pmLiveChip .pm-live__pop { color: var(--n-ink-2); } html[data-look="night"] body:not(#n) #pmLiveChip .pm-live__row:hover { background: var(--n-raise); } html[data-look="night"] body:not(#n) #pmLiveChip .pm-live__row i { background: var(--n-green); } html[data-look="night"] body:not(#n) #pmLiveChip .pm-live__row b { color: var(--n-ink); font-family: var(--n-font) !important; font-weight: 600; } html[data-look="night"] body:not(#n) #pmLiveChip :is(.pm-live__row small, .pm-live__row em, .pm-live__empty) { color: var(--n-faint); } html[data-look="night"] body:not(#n) #pmLiveChip .pm-live__foot { border-top: 1px solid var(--n-line); color: var(--n-faint); } html[data-look="night"] body:not(#n) #pmLiveChip .pm-live__btn { background: var(--n-raise); border: 1px solid var(--n-line); color: var(--n-ink-2); } html[data-look="night"] body:not(#n) #pmLiveChip .pm-live__btn:hover { border-color: var(--n-line-3); color: var(--n-ink); } /* ── 15. admin-type.css leaks (2026-09-28) ──────────────────────────────────── admin-type.css paints ANY element whose class contains "__title" or "__h" at 17px, bold and #1A2130 ink, with a very long selector. Shared pieces that open over a page (the search panel, the log-session form, the education modal) were caught by it: the search hint read "Browse recent" in 17px bold, and in Night the section headings and titles were dark ink on a dark panel. :not(#pm-n) lifts these above it. */ html[data-look="night"] body:not(#pm-n) .ms-gallery-card__hint { font: 400 10.5px/1.3 var(--n-font) !important; letter-spacing: 0 !important; color: var(--n-faint) !important; } html[data-look="night"] body:not(#pm-n) .ms-section__head { font: 400 11px/1.3 var(--n-mono) !important; letter-spacing: .1em !important; color: var(--n-faint) !important; } html[data-look="night"] body:not(#pm-n) :is(.ms-pv__head, .ms-drawer__head) { font: inherit !important; letter-spacing: normal !important; color: inherit !important; } html[data-look="night"] body:not(#pm-n) .ms-pv__title { font: 600 15px/1.3 var(--n-font) !important; letter-spacing: -.01em !important; color: var(--n-ink) !important; } html[data-look="night"] body:not(#pm-n) .ms-modal__title { font: 600 16px/1.3 var(--n-font) !important; letter-spacing: -.01em !important; color: var(--n-ink) !important; } html[data-look="night"] body:not(#pm-n) .ms-drawer__title { font: 600 17px/1.3 var(--n-font) !important; letter-spacing: -.01em !important; color: var(--n-ink) !important; } html[data-look="night"] body:not(#pm-n) .pmsr-head__title { font: 600 18px/1.25 var(--n-font) !important; letter-spacing: -.01em !important; color: var(--n-ink) !important; } html[data-look="night"] body:not(#pm-n) .pmpf-edumodal__title { font: 600 16px/1.3 var(--n-font) !important; letter-spacing: -.01em !important; color: var(--n-ink) !important; }