/* ============================================================================ ADMIN CONSOLE SKIN — 2026-08-16 Everything here is scoped to body:is(.pm-admin-console,.pm-assistant-console). Nothing leaks to the assistant, client or kid views, which keep js/sidebar.css untouched. REVERT: remove the to this file and the pm-admin-console class from . The page returns to the classic 54px hover rail with no other edit. Sections 1. Kill the classic rail, hand the space to .pmar 2. The rail itself (graphite, labelled, timeline accordion) 3. Top bar 4. Page typography + colour tokens (Nunito · one blue · one teal) 5. Family Portfolio — tabs become a vertical timeline (Caleb 2026-08-16) ============================================================================ */ /* ── 1. The classic rail steps aside ────────────────────────────────────── */ /* js/sidebar.js still runs — it owns modals and helpers the dashboard needs — but its visible rail is hidden and .pmar takes the gutter. Hiding rather than not-loading is deliberate: no dependency can go missing. */ body:is(.pm-admin-console,.pm-assistant-console) #pmSidebar, body:is(.pm-admin-console,.pm-assistant-console) .pm-sidebar, body:is(.pm-admin-console,.pm-assistant-console) #pmSidebarScrim { display: none !important; } /* Pad on the class ALONE — not .pm-has-sidebar — because several admin pages never carry that class, and the skin must hold on every one of them. */ body:is(.pm-admin-console,.pm-assistant-console) { padding-left: var(--pmar-w, 250px) !important; } /* Pre-paint gutter: the rail's column is painted from the very first frame (same trick as body.pm-kid-shell::before), so the rail never pops in and pages never flash unpadded. .pmar renders above it at z-index 60. */ body:is(.pm-admin-console,.pm-assistant-console)::before { content: ''; position: fixed; top: 0; left: 0; bottom: 0; width: var(--pmar-w, 250px); z-index: 59; pointer-events: none; background: linear-gradient(180deg, #3c4a78 0%, #212b47 54%, #0e1322 100%); } /* ── 2. THE RAIL ────────────────────────────────────────────────────────── */ body:is(.pm-admin-console,.pm-assistant-console) { --pmar-w: 250px; --pmar-top: #3c4a78; --pmar-mid: #212b47; --pmar-bot: #0e1322; --pmar-teal: #17BFA0; } .pmar { position: fixed; top: 0; left: 0; bottom: 0; width: var(--pmar-w); z-index: 60; display: flex; flex-direction: column; background: linear-gradient(180deg, var(--pmar-top) 0%, var(--pmar-mid) 54%, var(--pmar-bot) 100%); box-shadow: 6px 0 34px -14px rgba(30,41,78,.5), inset -1px 0 0 rgba(255,255,255,.07); font-family: "Nunito", ui-rounded, system-ui, -apple-system, sans-serif; } /* Sheen */ .pmar::before { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient(150deg, rgba(255,255,255,.13) 0%, transparent 40%), radial-gradient(circle at 20% 6%, rgba(255,255,255,.12), transparent 46%), radial-gradient(circle at 84% 96%, rgba(150,170,255,.11), transparent 52%); } /* Drifting stars */ .pmar::after { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; filter: drop-shadow(0 0 2px rgba(255,255,255,.4)); background-image: radial-gradient(2.2px 2.2px at 18% 12%, rgba(255,255,255,.9), transparent 62%), radial-gradient(1.4px 1.4px at 62% 22%, rgba(199,225,255,.85), transparent 62%), radial-gradient(2.5px 2.5px at 38% 33%, rgba(255,255,255,.8), transparent 62%), radial-gradient(1.4px 1.4px at 80% 44%, rgba(255,255,255,.75), transparent 62%), radial-gradient(2px 2px at 26% 55%, rgba(199,225,255,.9), transparent 62%), radial-gradient(1.5px 1.5px at 70% 65%, rgba(255,255,255,.8), transparent 62%), radial-gradient(2.3px 2.3px at 46% 77%, rgba(255,255,255,.85), transparent 62%), radial-gradient(1.4px 1.4px at 84% 86%, rgba(199,225,255,.8), transparent 62%), radial-gradient(1.9px 1.9px at 30% 92%, rgba(255,255,255,.75), transparent 62%), radial-gradient(1.5px 1.5px at 58% 6%, rgba(255,255,255,.8), transparent 62%); background-repeat: repeat; background-size: 100% 58%; animation: pmarTwinkle 4.4s ease-in-out infinite, pmarDrift 30s linear infinite; } @keyframes pmarTwinkle { 0%,100% { opacity: .5; } 50% { opacity: .95; } } @keyframes pmarDrift { 0% { background-position: 0 0; } 100% { background-position: 0 -58%; } } @media (prefers-reduced-motion: reduce) { .pmar::after { animation: none; opacity: .65; } } .pmar__brand { position: relative; z-index: 2; flex-shrink: 0; display: flex; align-items: center; gap: 12px; padding: 22px 20px 18px; text-decoration: none; } .pmar__mark { width: 38px; height: 38px; flex-shrink: 0; border-radius: 12px; background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.2); display: grid; place-items: center; color: #fff; box-shadow: 0 6px 18px -8px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.22); } .pmar__mark svg { width: 20px; height: 20px; stroke-width: 2; } .pmar__wm { display: flex; flex-direction: column; line-height: 1.25; } .pmar__wm b { font-size: 15px; font-weight: 600; color: #fff; } .pmar__wm span { font-size: 11px; font-weight: 400; color: rgba(255,255,255,.55); letter-spacing: .06em; text-transform: uppercase; } .pmar__scroll { position: relative; z-index: 2; flex: 1; overflow-y: auto; padding: 2px 12px 12px; } .pmar__scroll::-webkit-scrollbar { width: 0; } .pmar__scroll { scrollbar-width: none; } .pmar__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1px; } .pmar__grp { font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.34); padding: 18px 12px 8px; list-style: none; } .pmar__row { position: relative; list-style: none; } .pmar__item { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; border-radius: 10px; background: none; border: none; text-align: left; cursor: pointer; color: rgba(255,255,255,.76); font-family: inherit; font-size: 14.5px; font-weight: 400; text-decoration: none; transition: background .16s cubic-bezier(.4,0,.2,1), color .16s cubic-bezier(.4,0,.2,1); } .pmar__ico { display: grid; place-items: center; flex-shrink: 0; } .pmar__ico svg { width: 19px; height: 19px; stroke-width: 1.7; display: block; } .pmar__lbl { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pmar__item:hover { background: rgba(255,255,255,.09); color: #fff; } .pmar__item.is-active { background: #fff; color: #1A2130; font-weight: 600; box-shadow: 0 6px 16px -8px rgba(0,0,0,.5); } .pmar__item.is-active .pmar__ico svg { color: var(--pmar-teal); } .pmar__chev { display: grid; place-items: center; flex-shrink: 0; color: rgba(255,255,255,.4); transition: transform .24s cubic-bezier(.4,0,.2,1); } .pmar__chev svg { width: 15px; height: 15px; stroke-width: 2; display: block; } .pmar__row.is-open > .pmar__item .pmar__chev { transform: rotate(90deg); color: rgba(255,255,255,.85); } .pmar__item.is-active .pmar__chev { color: #A2AAB6; } .pmar__badge { flex-shrink: 0; min-width: 21px; height: 20px; padding: 0 7px; border-radius: 999px; background: #EF5B5B; color: #fff; font-size: 11px; font-weight: 600; line-height: 20px; text-align: center; } /* ── The accordion + its timeline spine ── */ .pmar__acc { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .28s cubic-bezier(.4,0,.2,1); } .pmar__row.is-open > .pmar__acc { grid-template-rows: 1fr; } .pmar__acc-in { overflow: hidden; } .pmar__sub { list-style: none; margin: 3px 0 8px; padding: 0 0 0 22px; position: relative; } .pmar__sub::before { content: ''; position: absolute; left: 21px; top: 2px; bottom: 10px; width: 1px; background: rgba(255,255,255,.18); } .pmar__sublink { position: relative; display: flex; align-items: center; gap: 8px; padding: 8px 10px 8px 16px; border-radius: 8px; text-decoration: none; color: rgba(255,255,255,.6); font-size: 13.5px; font-weight: 400; transition: background .15s cubic-bezier(.4,0,.2,1), color .15s cubic-bezier(.4,0,.2,1); } /* the node that sits on the spine */ .pmar__sublink::before { content: ''; position: absolute; left: -4px; top: 50%; transform: translateY(-50%); width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.28); border: 1.5px solid var(--pmar-mid); transition: background .16s cubic-bezier(.4,0,.2,1), box-shadow .16s cubic-bezier(.4,0,.2,1); } .pmar__sublink:hover { color: #fff; background: rgba(255,255,255,.07); } .pmar__sublink:hover::before { background: rgba(255,255,255,.6); } .pmar__sublink.is-active { color: var(--pmar-teal); font-weight: 600; } .pmar__sublink.is-active::before { background: var(--pmar-teal); box-shadow: 0 0 0 3px rgba(23,191,160,.22); } .pmar__sublink--all { font-style: italic; color: rgba(255,255,255,.45); } .pmar__subhead { padding: 11px 10px 5px 16px; font-size: 10.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.3); list-style: none; } .pmar__loading { padding: 8px 10px 8px 16px; font-size: 13px; color: rgba(255,255,255,.45); list-style: none; } .pmar__foot { position: relative; z-index: 2; flex-shrink: 0; padding: 12px; } .pmar__out { display: flex; align-items: center; justify-content: center; gap: 9px; width: 100%; padding: 11px; border-radius: 11px; cursor: pointer; font-family: inherit; background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.17); color: #fff; font-size: 14px; font-weight: 500; transition: background .16s cubic-bezier(.4,0,.2,1); } .pmar__out:hover { background: rgba(255,255,255,.16); } .pmar__out[disabled] { opacity: .6; cursor: default; } .pmar__out svg { width: 16px; height: 16px; stroke-width: 1.8; } /* ── 3. TOP BAR ─────────────────────────────────────────────────────────── */ body:is(.pm-admin-console,.pm-assistant-console) .nx-topbar { background: linear-gradient(118deg, var(--pmar-bot) 0%, var(--pmar-mid) 46%, var(--pmar-top) 100%) !important; border-bottom: 1px solid rgba(14,19,34,.45) !important; box-shadow: 0 8px 22px -16px rgba(14,19,34,.65), inset 0 1px 0 rgba(255,255,255,.12) !important; padding: 14px 28px; } body:is(.pm-admin-console,.pm-assistant-console) .nx-topbar::before { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; background-image: radial-gradient(1.4px 1.4px at 6% 34%, rgba(255,255,255,.85), transparent 60%), radial-gradient(1.1px 1.1px at 15% 70%, rgba(199,225,255,.8), transparent 60%), radial-gradient(1.5px 1.5px at 25% 26%, rgba(255,255,255,.85), transparent 60%), radial-gradient(1.1px 1.1px at 36% 76%, rgba(255,255,255,.75), transparent 60%), radial-gradient(1.3px 1.3px at 48% 30%, rgba(199,225,255,.8), transparent 60%), radial-gradient(1.1px 1.1px at 59% 68%, rgba(255,255,255,.75), transparent 60%), radial-gradient(1.5px 1.5px at 70% 24%, rgba(255,255,255,.85), transparent 60%), radial-gradient(1.1px 1.1px at 80% 72%, rgba(199,225,255,.75), transparent 60%), radial-gradient(1.4px 1.4px at 91% 36%, rgba(255,255,255,.85), transparent 60%); background-repeat: repeat; background-size: 58% 100%; filter: drop-shadow(0 0 1.5px rgba(255,255,255,.4)); animation: pmarTwinkle 4.2s ease-in-out infinite, pmarBarDrift 30s linear infinite; } @keyframes pmarBarDrift { from { background-position: 0 0; } to { background-position: -116% 0; } } @media (prefers-reduced-motion: reduce) { body:is(.pm-admin-console,.pm-assistant-console) .nx-topbar::before { animation: none; } } body:is(.pm-admin-console,.pm-assistant-console) .nx-topbar > * { position: relative; z-index: 1; } body:is(.pm-admin-console,.pm-assistant-console) .nx-search input { background: rgba(255,255,255,.13) !important; border: 1px solid rgba(255,255,255,.2) !important; border-radius: 999px !important; color: #fff !important; font-family: inherit; font-weight: 400; } body:is(.pm-admin-console,.pm-assistant-console) .nx-search input::placeholder { color: rgba(255,255,255,.62) !important; } body:is(.pm-admin-console,.pm-assistant-console) .nx-search input:focus { background: rgba(255,255,255,.2) !important; border-color: rgba(255,255,255,.45) !important; } body:is(.pm-admin-console,.pm-assistant-console) .nx-search svg { color: rgba(255,255,255,.7) !important; } body:is(.pm-admin-console,.pm-assistant-console) .nx-topbar [data-pm-install] { background: rgba(255,255,255,.14) !important; border: 1px solid rgba(255,255,255,.24) !important; border-radius: 999px !important; color: #fff !important; font-weight: 500 !important; } body:is(.pm-admin-console,.pm-assistant-console) .nx-userpod { background: rgba(255,255,255,.13) !important; border: 1px solid rgba(255,255,255,.22) !important; } body:is(.pm-admin-console,.pm-assistant-console) .nx-userpod__name { color: #fff !important; font-weight: 500 !important; } body:is(.pm-admin-console,.pm-assistant-console) .nx-userpod__avatar { background: linear-gradient(135deg, #F5DE93, #D9AE45) !important; color: #5A4300 !important; font-weight: 600 !important; box-shadow: none !important; } /* ── 4. PAGE TYPE + COLOUR ──────────────────────────────────────────────── */ /* Nunito, light weights, ONE blue and ONE teal. No indigo, no purple. */ body:is(.pm-admin-console,.pm-assistant-console) { --primary: #4A9FF5; --primary-hover: #2E86E0; --primary-soft: #EAF4FE; font-family: "Nunito", ui-rounded, system-ui, -apple-system, sans-serif; font-weight: 400; background: #F4F7FA; color: #2C3341; } body:is(.pm-admin-console,.pm-assistant-console) .nx-shell { max-width: 1400px; } body:is(.pm-admin-console,.pm-assistant-console) .nx-h1 { font-family: inherit; font-size: 26px; font-weight: 600; letter-spacing: 0; color: #1A2130; } body:is(.pm-admin-console,.pm-assistant-console) .nx-sub { font-size: 14px; font-weight: 400; color: #77808F; } body:is(.pm-admin-console,.pm-assistant-console) .nx-card__title, body:is(.pm-admin-console,.pm-assistant-console) .adp-card__title, body:is(.pm-admin-console,.pm-assistant-console) .ado-card__title, body:is(.pm-admin-console,.pm-assistant-console) .ir-h { font-family: inherit; font-size: 17px; font-weight: 600; letter-spacing: 0; color: #1A2130; } body:is(.pm-admin-console,.pm-assistant-console) .nx-card__sub, body:is(.pm-admin-console,.pm-assistant-console) .adp-card__sub, body:is(.pm-admin-console,.pm-assistant-console) .ado-card__sub, body:is(.pm-admin-console,.pm-assistant-console) .ir-sub { font-size: 13px; font-weight: 400; color: #A2AAB6; } body:is(.pm-admin-console,.pm-assistant-console) .nx-card, body:is(.pm-admin-console,.pm-assistant-console) .adp-card, body:is(.pm-admin-console,.pm-assistant-console) .ado-card, body:is(.pm-admin-console,.pm-assistant-console) .nx-stats { border-radius: 14px; border: 1px solid #EDF0F4; box-shadow: 0 2px 8px rgba(28,41,66,.045); } body:is(.pm-admin-console,.pm-assistant-console) .nx-stats__num { font-family: inherit; font-size: 29px; font-weight: 700; letter-spacing: 0; color: #1A2130; } body:is(.pm-admin-console,.pm-assistant-console) .nx-stats__label { font-size: 12.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: #77808F; } body:is(.pm-admin-console,.pm-assistant-console) .nx-head__cta { background: var(--primary); border-color: var(--primary); border-radius: 10px; font-family: inherit; font-weight: 600; } body:is(.pm-admin-console,.pm-assistant-console) .nx-head__cta:hover { background: var(--primary-hover); border-color: var(--primary-hover); } /* ── 5. FAMILY PORTFOLIO — tabs become a vertical timeline ──────────────── */ /* Caleb 2026-08-16: "i want these to have timeline like dashboard does and for these to be under the header family portfolios." All nine tabs are preserved exactly — family-portfolio.js still renders .pmpf__tab buttons and still owns the click wiring. Only the axis changes: the strip becomes a left column with a spine, so it can never clip a label the way the horizontal scroller did. */ @media (min-width: 981px) { body:is(.pm-admin-console,.pm-assistant-console) .pmpf { display: grid; grid-template-columns: 232px minmax(0, 1fr); grid-template-areas: "nav panes" "nav foot"; align-items: start; column-gap: 26px; } body:is(.pm-admin-console,.pm-assistant-console) .pmpf__tabswrap { grid-area: nav; position: relative; padding: 4px 0 4px 20px; margin: 0; overflow: visible; border-right: 1px solid #EDF0F4; } /* the spine */ body:is(.pm-admin-console,.pm-assistant-console) .pmpf__tabswrap::before { content: ''; position: absolute; left: 19px; top: 14px; bottom: 14px; width: 1px; background: #E1E6ED; } body:is(.pm-admin-console,.pm-assistant-console) .pmpf__tabs { display: flex; flex-direction: column; gap: 2px; overflow: visible; width: auto; padding: 0; margin: 0; border: none; } body:is(.pm-admin-console,.pm-assistant-console) .pmpf__tab { position: relative; width: 100%; text-align: left; margin: 0; padding: 9px 12px 9px 16px; border: none !important; border-radius: 8px !important; background: transparent !important; box-shadow: none !important; font-family: inherit; font-size: 13.5px; font-weight: 400; color: #77808F; white-space: normal; transform: none !important; transition: background .15s ease, color .15s ease; } /* the node on the spine */ body:is(.pm-admin-console,.pm-assistant-console) .pmpf__tab::before { content: ''; position: absolute; left: -5px; top: 50%; transform: translateY(-50%); width: 7px; height: 7px; border-radius: 50%; background: #D3DAE3; border: 1.5px solid #fff; transition: background .16s ease, box-shadow .16s ease; } body:is(.pm-admin-console,.pm-assistant-console) .pmpf__tab::after { display: none !important; } body:is(.pm-admin-console,.pm-assistant-console) .pmpf__tab:hover { background: #F5F8FC !important; color: #1A2130 !important; } body:is(.pm-admin-console,.pm-assistant-console) .pmpf__tab:hover::before { background: #A9B4C2; } body:is(.pm-admin-console,.pm-assistant-console) .pmpf__tab.is-active { background: #EAF4FE !important; color: #2E86E0 !important; font-weight: 600; } body:is(.pm-admin-console,.pm-assistant-console) .pmpf__tab.is-active::before { background: #4A9FF5; box-shadow: 0 0 0 3px rgba(74,159,245,.2); } body:is(.pm-admin-console,.pm-assistant-console) .pmpf__panes { grid-area: panes; margin: 0 !important; border-radius: 12px; min-width: 0; overflow: hidden; } /* The prev/next dot bar was the horizontal strip's companion — the timeline shows every destination at once, so it has nothing left to do. */ body:is(.pm-admin-console,.pm-assistant-console) .pmpf-sw__foot { display: none !important; } } /* Below 980px the timeline would eat the width — fall back to the strip family-portfolio.js ships by default. */ @media (max-width: 900px) { body:is(.pm-admin-console,.pm-assistant-console) { padding-left: 0 !important; } body:is(.pm-admin-console,.pm-assistant-console)::before { display: none; } .pmar { display: none; } } /* Anchor targets for the rail's Dashboard branch. scroll-margin keeps the sticky top bar from covering the heading you just jumped to. */ body:is(.pm-admin-console,.pm-assistant-console) { scroll-behavior: smooth; } body:is(.pm-admin-console,.pm-assistant-console) [id^="pmar-"] { display: block; scroll-margin-top: 84px; } @media (prefers-reduced-motion: reduce) { body:is(.pm-admin-console,.pm-assistant-console) { scroll-behavior: auto; } } /* ════════════════════════════════════════════════════════════════════════ 6. THE BANNER STACK → compact uniform rows (2026-08-16, stage two) The dashboard opens with up to six full-width bars, each a different colour at a different height: Installs (blue), studio (purple gradient), waiting lobby, counter-proposals (amber), overdue grading (amber), notifications (white). Nothing reads as more urgent than anything else — it just reads as noise. Done in CSS ONLY, deliberately. Every one of these bars is wired to its own RPC, realtime channel and click handler; rewriting the markup to merge them into one panel would put all of that at risk for a visual gain. Instead each keeps its element, its id and its JS, and is restyled to a 54px single-line row. Colour survives as a 3px left rule and the icon tint — never a full-width wash. They stay separate elements rather than one card because any of them can be [hidden] at any moment; "which one is visually last" is not something CSS can track reliably, and a card with a floating bottom border looks broken. Uniform stacked rows are robust to any combination being hidden. !important throughout: these bars carry inline style attributes. ════════════════════════════════════════════════════════════════════════ */ body:is(.pm-admin-console,.pm-assistant-console) #ahInstallsCard, body:is(.pm-admin-console,.pm-assistant-console) #ahResumeStudio, body:is(.pm-admin-console,.pm-assistant-console) #ahCounterBanner, body:is(.pm-admin-console,.pm-assistant-console) #ahGradingOverdueBanner { display: flex !important; align-items: center !important; gap: 13px !important; min-height: 54px !important; padding: 0 16px !important; margin: 0 0 8px !important; background: #fff !important; /* 2026-08-16 — the 3px coloured left rule that used to sit here is GONE. Caleb: "im nto a fav of the lateral vertical colour on stuff like this… it looks cheap and screams AI made this". He is right: a stripe down the side of a card is a decoration standing in for a meaning the row already states in words. The accent survives where it is doing work — the icon tint and the CTA — and nowhere else. */ border: 1px solid #EDF0F4 !important; border-radius: 10px !important; box-shadow: 0 1px 2px rgba(28,41,66,.04) !important; color: #2C3341 !important; transition: border-color .15s ease, box-shadow .15s ease !important; } /* …but `hidden` has to actually hide. The rule above is `display: flex !important`, which outranks the UA stylesheet's `[hidden] { display: none }` — so any of these rows that the dashboard had marked hidden was still laid out and still painted. Measured on the real page 2026-08-17: #ahCounterBanner was 125px tall with hidden=true, i.e. a "counter-proposals" bar was on screen at a moment the code had decided there were none to show. The !important above exists because these bars carry inline style attributes; this rule needs the same weapon to undo it, and #id[hidden] outranks #id so it wins wherever both apply. */ body:is(.pm-admin-console,.pm-assistant-console) #ahInstallsCard[hidden], body:is(.pm-admin-console,.pm-assistant-console) #ahResumeStudio[hidden], body:is(.pm-admin-console,.pm-assistant-console) #ahCounterBanner[hidden], body:is(.pm-admin-console,.pm-assistant-console) #ahGradingOverdueBanner[hidden], body:is(.pm-admin-console,.pm-assistant-console) #ahWaitingLobby[hidden], body:is(.pm-admin-console,.pm-assistant-console) #adNeedsCard[hidden] { display: none !important; } body:is(.pm-admin-console,.pm-assistant-console) #ahInstallsCard:hover, body:is(.pm-admin-console,.pm-assistant-console) #ahResumeStudio:hover, body:is(.pm-admin-console,.pm-assistant-console) #ahCounterBanner:hover, body:is(.pm-admin-console,.pm-assistant-console) #ahGradingOverdueBanner:hover { box-shadow: 0 4px 14px -6px rgba(28,41,66,.16) !important; transform: none !important; } /* Per-row accent — now reaches ONLY the icon square and the CTA text. Studio moved off #7C3AED to the console's teal: purple has been rejected everywhere else in this redesign and had no business surviving here. */ body:is(.pm-admin-console,.pm-assistant-console) #ahInstallsCard { --row-accent: #4A9FF5; } body:is(.pm-admin-console,.pm-assistant-console) #ahResumeStudio { --row-accent: #17BFA0; } body:is(.pm-admin-console,.pm-assistant-console) #ahCounterBanner { --row-accent: #EAB308; } body:is(.pm-admin-console,.pm-assistant-console) #ahGradingOverdueBanner { --row-accent: #EF5B5B; } /* The 38-42px gradient icon chips shrink to a flat 30px tinted square */ body:is(.pm-admin-console,.pm-assistant-console) #ahInstallsCard > span:first-child, body:is(.pm-admin-console,.pm-assistant-console) #ahResumeStudio > span:first-child, body:is(.pm-admin-console,.pm-assistant-console) #ahCounterBanner > div:first-child, body:is(.pm-admin-console,.pm-assistant-console) #ahGradingOverdueBanner > div:first-child { width: 30px !important; height: 30px !important; border-radius: 8px !important; background: color-mix(in srgb, var(--row-accent) 14%, #fff) !important; color: var(--row-accent) !important; box-shadow: none !important; font-size: 15px !important; display: grid !important; place-items: center !important; flex-shrink: 0 !important; } body:is(.pm-admin-console,.pm-assistant-console) #ahInstallsCard > span:first-child svg, body:is(.pm-admin-console,.pm-assistant-console) #ahResumeStudio > span:first-child svg, body:is(.pm-admin-console,.pm-assistant-console) #ahCounterBanner > div:first-child svg, body:is(.pm-admin-console,.pm-assistant-console) #ahGradingOverdueBanner > div:first-child svg { width: 16px !important; height: 16px !important; stroke: var(--row-accent) !important; } /* Title + subtitle go side-by-side on one line instead of stacking */ body:is(.pm-admin-console,.pm-assistant-console) #ahInstallsCard > span:nth-child(2), body:is(.pm-admin-console,.pm-assistant-console) #ahResumeStudio > span:nth-child(2), body:is(.pm-admin-console,.pm-assistant-console) #ahCounterBanner > div:nth-child(2), body:is(.pm-admin-console,.pm-assistant-console) #ahGradingOverdueBanner > div:nth-child(2) { display: flex !important; align-items: baseline !important; gap: 10px !important; flex: 1 1 auto !important; min-width: 0 !important; flex-wrap: wrap !important; } body:is(.pm-admin-console,.pm-assistant-console) #ahInstallsCard > span:nth-child(2) > span:first-child, body:is(.pm-admin-console,.pm-assistant-console) #ahResumeStudio > span:nth-child(2) > span:first-child, body:is(.pm-admin-console,.pm-assistant-console) #ahCounterTitle, body:is(.pm-admin-console,.pm-assistant-console) #ahGradingOverdueTitle { font-family: inherit !important; font-size: 14px !important; font-weight: 600 !important; letter-spacing: 0 !important; color: #1A2130 !important; margin: 0 !important; white-space: nowrap !important; } body:is(.pm-admin-console,.pm-assistant-console) #ahInstallsCard > span:nth-child(2) > span:last-child, body:is(.pm-admin-console,.pm-assistant-console) #ahResumeStudio > span:nth-child(2) > span:last-child, body:is(.pm-admin-console,.pm-assistant-console) #ahCounterSub, body:is(.pm-admin-console,.pm-assistant-console) #ahGradingOverdueSub { font-family: inherit !important; font-size: 12.5px !important; font-weight: 400 !important; color: #77808F !important; opacity: 1 !important; margin: 0 !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; } /* Trailing CTA ("View →", "Join →", "REVIEW ›") */ body:is(.pm-admin-console,.pm-assistant-console) #ahInstallsCard > span:last-child, body:is(.pm-admin-console,.pm-assistant-console) #ahResumeStudio > span:last-child, body:is(.pm-admin-console,.pm-assistant-console) #ahCounterBanner > span:last-child, body:is(.pm-admin-console,.pm-assistant-console) #ahGradingOverdueBanner > span:last-child { font-family: inherit !important; font-size: 12.5px !important; font-weight: 600 !important; letter-spacing: 0 !important; text-transform: none !important; color: var(--row-accent) !important; flex-shrink: 0 !important; } /* Waiting-lobby group + the notification bell join the same rhythm */ body:is(.pm-admin-console,.pm-assistant-console) #ahWaitingLobby { margin: 0 0 8px !important; } body:is(.pm-admin-console,.pm-assistant-console) .nx-notif-strip { margin: 0 0 18px !important; } body:is(.pm-admin-console,.pm-assistant-console) .nx-notif-trigger { min-height: 54px; padding: 0 16px !important; border: 1px solid #EDF0F4 !important; /* left rule removed — see above */ border-radius: 10px !important; background: #fff !important; } body:is(.pm-admin-console,.pm-assistant-console) .nx-notif-trigger__title { font-size: 14px; font-weight: 600; color: #1A2130; } body:is(.pm-admin-console,.pm-assistant-console) .nx-notif-trigger__sub { font-size: 12.5px; font-weight: 400; color: #77808F; } /* ── 7. KPI ROW — LUNO card anatomy, without touching the markup ───────── */ /* The five cells keep their ids (kpiClients … kpiClaudeSpend) and the JS keeps writing into them. Only the frame changes: each cell becomes its own card with a coloured bar along the bottom edge, and the labels stop wrapping to two lines. */ body:is(.pm-admin-console,.pm-assistant-console) .nx-stats { background: transparent !important; border: none !important; box-shadow: none !important; padding: 0 !important; } body:is(.pm-admin-console,.pm-assistant-console) .nx-stats__grid { gap: 14px !important; } body:is(.pm-admin-console,.pm-assistant-console) .nx-stats__cell { position: relative; background: #fff; border: 1px solid #EDF0F4 !important; border-radius: 14px; padding: 18px 18px 20px !important; box-shadow: 0 2px 8px rgba(28,41,66,.045); overflow: hidden; transition: box-shadow .2s ease, transform .2s ease; } body:is(.pm-admin-console,.pm-assistant-console) .nx-stats__cell:hover { box-shadow: 0 6px 20px -6px rgba(28,41,66,.12); transform: translateY(-2px); } /* the signature bottom bar */ body:is(.pm-admin-console,.pm-assistant-console) .nx-stats__cell::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--kpi-accent, #4A9FF5); } body:is(.pm-admin-console,.pm-assistant-console) .nx-stats__cell:nth-child(1) { --kpi-accent: #17BFA0; } body:is(.pm-admin-console,.pm-assistant-console) .nx-stats__cell:nth-child(2) { --kpi-accent: #EAB308; } body:is(.pm-admin-console,.pm-assistant-console) .nx-stats__cell:nth-child(3) { --kpi-accent: #4A9FF5; } body:is(.pm-admin-console,.pm-assistant-console) .nx-stats__cell:nth-child(4) { --kpi-accent: #17BFA0; } body:is(.pm-admin-console,.pm-assistant-console) .nx-stats__cell:nth-child(5) { --kpi-accent: #A2AAB6; } /* Label first, number second — LUNO's order — done with flex order so the markup stays exactly as the JS expects to find it. */ body:is(.pm-admin-console,.pm-assistant-console) .nx-stats__cell { display: flex; flex-direction: column; } body:is(.pm-admin-console,.pm-assistant-console) .nx-stats__label { order: -1; font-size: 11px !important; font-weight: 600 !important; letter-spacing: .04em !important; line-height: 1.4 !important; color: #77808F !important; margin: 0 0 10px !important; } body:is(.pm-admin-console,.pm-assistant-console) .nx-stats__num { margin: 0 !important; line-height: 1 !important; } body:is(.pm-admin-console,.pm-assistant-console) .nx-stats__extra { margin-top: 12px !important; padding-top: 10px !important; border-top: 1px solid #EDF0F4 !important; } body:is(.pm-admin-console,.pm-assistant-console) .nx-stats__extra-row { font-size: 12px !important; font-weight: 400 !important; color: #77808F !important; } body:is(.pm-admin-console,.pm-assistant-console) .nx-stats__extra-row strong { font-weight: 700 !important; color: #1A2130 !important; } body:is(.pm-admin-console,.pm-assistant-console) .nx-stats__cell--clickable:hover { border-color: #4A9FF5 !important; } /* ════════════════════════════════════════════════════════════════════════ 8. QUICK BAR — the alert bars, relocated into the top bar (2026-08-16, Caleb: "make these horizontal buttons in the header near the install button and add the install button into this also… make the top horizontal pill look just like what the clients have") Deliberately the SAME recessed-glass treatment as the parent rail's "Child" bar (.par-actions--bar, css/parent-rail.css §N): dark inset well, hairline highlight, transparent icon buttons that fill on hover. Parents and the owner get the same component in their own colour. js/admin-quickbar.js MOVES the live bar nodes in here; these rules only dress the result. The bars keep their ids, so §6's row styling still applies to them inside the popovers. ════════════════════════════════════════════════════════════════════════ */ body:is(.pm-admin-console,.pm-assistant-console) .pmac { display: flex; align-items: center; gap: 2px; margin: 0 auto; padding: 4px; border-radius: 999px; background: rgba(8,12,24,.36); border: 1px solid rgba(255,255,255,.2); box-shadow: inset 0 1px 3px rgba(0,0,0,.22), 0 1px 0 rgba(255,255,255,.09); } body:is(.pm-admin-console,.pm-assistant-console) .pmac__lbl { padding: 0 11px 0 10px; font-size: 12px; font-weight: 500; color: rgba(255,255,255,.86); white-space: nowrap; } body:is(.pm-admin-console,.pm-assistant-console) .pmac__slot { position: relative; } body:is(.pm-admin-console,.pm-assistant-console) .pmac__slot[hidden] { display: none; } body:is(.pm-admin-console,.pm-assistant-console) .pmac__btn { position: relative; width: 38px; height: 34px; border-radius: 999px; display: grid; place-items: center; cursor: pointer; background: transparent; border: none; color: #EEF1FF; transition: background .16s ease; } body:is(.pm-admin-console,.pm-assistant-console) .pmac__btn svg { width: 17px; height: 17px; } body:is(.pm-admin-console,.pm-assistant-console) .pmac__btn:hover, body:is(.pm-admin-console,.pm-assistant-console) .pmac__btn[aria-expanded="true"] { background: rgba(255,255,255,.2); } /* The severity dot — the only colour in the bar. */ body:is(.pm-admin-console,.pm-assistant-console) .pmac__dot { position: absolute; top: 5px; right: 6px; width: 7px; height: 7px; border-radius: 50%; background: var(--pmac-tone, #4A9FF5); box-shadow: 0 0 0 2px rgba(14,19,34,.55); } body:is(.pm-admin-console,.pm-assistant-console) .pmac__slot--blue { --pmac-tone: #4A9FF5; } body:is(.pm-admin-console,.pm-assistant-console) .pmac__slot--violet { --pmac-tone: #A78BFA; } body:is(.pm-admin-console,.pm-assistant-console) .pmac__slot--amber { --pmac-tone: #EAB308; } body:is(.pm-admin-console,.pm-assistant-console) .pmac__slot--red { --pmac-tone: #EF5B5B; } /* Anything urgent pulses, so a red dot is noticed without a full-width bar. */ body:is(.pm-admin-console,.pm-assistant-console) .pmac__slot--red .pmac__dot { animation: pmacPulse 1.9s ease-in-out infinite; } @keyframes pmacPulse { 0%,100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.25); opacity: .6; } } @media (prefers-reduced-motion: reduce) { body:is(.pm-admin-console,.pm-assistant-console) .pmac__slot--red .pmac__dot { animation: none; } } body:is(.pm-admin-console,.pm-assistant-console) .pmac__tip { position: absolute; bottom: -31px; left: 50%; transform: translateX(-50%) translateY(3px); background: #1A2130; color: #fff; font-size: 11.5px; font-weight: 400; padding: 5px 10px; border-radius: 7px; white-space: nowrap; opacity: 0; pointer-events: none; z-index: 60; transition: opacity .15s ease, transform .15s ease; } body:is(.pm-admin-console,.pm-assistant-console) .pmac__btn:hover .pmac__tip { opacity: 1; transform: translateX(-50%) translateY(0); } body:is(.pm-admin-console,.pm-assistant-console) .pmac__btn[aria-expanded="true"] .pmac__tip { opacity: 0; } /* Popover — LUNO's Notifications Center shape: white card, titled, dropped below the bar with a soft shadow. */ body:is(.pm-admin-console,.pm-assistant-console) .pmac__pop { position: absolute; top: calc(100% + 12px); right: 0; z-index: 70; width: 380px; max-width: calc(100vw - 40px); background: #fff; border: 1px solid #E6EAF0; border-radius: 14px; box-shadow: 0 24px 60px -18px rgba(16,24,40,.36); overflow: hidden; } body:is(.pm-admin-console,.pm-assistant-console) .pmac__pop-hd { padding: 13px 16px; border-bottom: 1px solid #F1F2F6; font-size: 13.5px; font-weight: 600; color: #1A2130; background: #FCFCFD; } body:is(.pm-admin-console,.pm-assistant-console) .pmac__pop-bd { padding: 12px; } /* The relocated bar fills the popover: no card-in-a-card, no left rule. */ body:is(.pm-admin-console,.pm-assistant-console) .pmac__pop-bd > * { margin: 0 !important; border: none !important; box-shadow: none !important; border-radius: 8px !important; min-height: 0 !important; padding: 8px !important; width: 100% !important; } body:is(.pm-admin-console,.pm-assistant-console) .pmac__pop-bd > *:hover { background: #F7F9FC !important; } /* ── Row layout INSIDE the popover (2026-08-16) ────────────────────────── Caleb: "it looks sorta messy and not clean" — the Overdue grading and Installs rows. Cause: §6 lays these rows out for the BODY, where they are 54px one-liners in a full-width column — title and subtitle side by side on one baseline, both `nowrap` with an ellipsis. Reused inside a 380px popover that runs out of room immediately: the title pushes the CTA onto its own line and the subtitle gets cut mid-word ("click Revi…"). The popover is the surface where you actually READ the message, so here the row stacks — title, then the full sentence beneath it, CTA parked at the right. Selectors carry `.pmac__pop-bd` so they outrank §6's id rules; the body rows are untouched. */ body:is(.pm-admin-console,.pm-assistant-console) .pmac__pop-bd > * { align-items: center !important; gap: 12px !important; padding: 11px 12px !important; } body:is(.pm-admin-console,.pm-assistant-console) .pmac__pop-bd #ahInstallsCard > span:nth-child(2), body:is(.pm-admin-console,.pm-assistant-console) .pmac__pop-bd #ahResumeStudio > span:nth-child(2), body:is(.pm-admin-console,.pm-assistant-console) .pmac__pop-bd #ahCounterBanner > div:nth-child(2), body:is(.pm-admin-console,.pm-assistant-console) .pmac__pop-bd #ahGradingOverdueBanner > div:nth-child(2) { flex-direction: column !important; align-items: flex-start !important; gap: 3px !important; flex-wrap: nowrap !important; } /* Let both lines wrap — no ellipsis anywhere in here */ body:is(.pm-admin-console,.pm-assistant-console) .pmac__pop-bd #ahInstallsCard > span:nth-child(2) > span, body:is(.pm-admin-console,.pm-assistant-console) .pmac__pop-bd #ahResumeStudio > span:nth-child(2) > span, body:is(.pm-admin-console,.pm-assistant-console) .pmac__pop-bd #ahCounterTitle, body:is(.pm-admin-console,.pm-assistant-console) .pmac__pop-bd #ahCounterSub, body:is(.pm-admin-console,.pm-assistant-console) .pmac__pop-bd #ahGradingOverdueTitle, body:is(.pm-admin-console,.pm-assistant-console) .pmac__pop-bd #ahGradingOverdueSub { white-space: normal !important; overflow: visible !important; text-overflow: clip !important; } body:is(.pm-admin-console,.pm-assistant-console) .pmac__pop-bd #ahInstallsCard > span:nth-child(2) > span:first-child, body:is(.pm-admin-console,.pm-assistant-console) .pmac__pop-bd #ahResumeStudio > span:nth-child(2) > span:first-child, body:is(.pm-admin-console,.pm-assistant-console) .pmac__pop-bd #ahCounterTitle, body:is(.pm-admin-console,.pm-assistant-console) .pmac__pop-bd #ahGradingOverdueTitle { font-size: 13.5px !important; line-height: 1.35 !important; } body:is(.pm-admin-console,.pm-assistant-console) .pmac__pop-bd #ahInstallsCard > span:nth-child(2) > span:last-child, body:is(.pm-admin-console,.pm-assistant-console) .pmac__pop-bd #ahResumeStudio > span:nth-child(2) > span:last-child, body:is(.pm-admin-console,.pm-assistant-console) .pmac__pop-bd #ahCounterSub, body:is(.pm-admin-console,.pm-assistant-console) .pmac__pop-bd #ahGradingOverdueSub { font-size: 12px !important; line-height: 1.45 !important; } /* CTA sits at the right edge, vertically centred against both lines */ body:is(.pm-admin-console,.pm-assistant-console) .pmac__pop-bd #ahInstallsCard > span:last-child, body:is(.pm-admin-console,.pm-assistant-console) .pmac__pop-bd #ahResumeStudio > span:last-child, body:is(.pm-admin-console,.pm-assistant-console) .pmac__pop-bd #ahCounterBanner > span:last-child, body:is(.pm-admin-console,.pm-assistant-console) .pmac__pop-bd #ahGradingOverdueBanner > span:last-child { align-self: center !important; margin-left: auto !important; white-space: nowrap !important; } /* Install App joins the group as its trailing action. */ body:is(.pm-admin-console,.pm-assistant-console) .pmac__install { margin: 0 0 0 4px !important; padding: 8px 15px !important; border-radius: 999px !important; background: rgba(255,255,255,.16) !important; border: 1px solid rgba(255,255,255,.26) !important; color: #fff !important; font-family: inherit !important; font-size: 12.5px !important; font-weight: 500 !important; } /* The notification strip, shrunk to a bell in the bar. Same approach client-dashboard.html uses for parents (.nx-notif-strip--topbar). */ body:is(.pm-admin-console,.pm-assistant-console) .nx-notif-strip--topbar { margin: 0 !important; position: relative; } body:is(.pm-admin-console,.pm-assistant-console) .nx-notif-trigger { min-height: 0 !important; width: 38px; height: 34px; padding: 0 !important; border: none !important; border-radius: 999px !important; background: transparent !important; display: grid !important; place-items: center !important; cursor: pointer; } body:is(.pm-admin-console,.pm-assistant-console) .nx-notif-trigger:hover { background: rgba(255,255,255,.2) !important; } body:is(.pm-admin-console,.pm-assistant-console) .nx-notif-trigger__text, body:is(.pm-admin-console,.pm-assistant-console) .nx-notif-trigger__chev { display: none !important; } body:is(.pm-admin-console,.pm-assistant-console) .nx-notif-trigger__icon { position: relative; color: #EEF1FF; } body:is(.pm-admin-console,.pm-assistant-console) .nx-notif-trigger__icon svg { width: 17px; height: 17px; } body:is(.pm-admin-console,.pm-assistant-console) .nx-notif-trigger__badge { position: absolute !important; top: -7px !important; right: -8px !important; min-width: 17px; height: 17px; padding: 0 4px; background: #EF5B5B !important; color: #fff !important; border-radius: 999px; font-size: 10px; font-weight: 700; line-height: 17px; text-align: center; border: 2px solid #1b2440; } body:is(.pm-admin-console,.pm-assistant-console) .nx-notif-strip--topbar .nx-notif-panel { position: absolute; top: calc(100% + 12px); right: 0; z-index: 70; width: 380px; max-width: calc(100vw - 40px); background: #fff; color: #2C3341; border: 1px solid #E6EAF0; border-radius: 14px; box-shadow: 0 24px 60px -18px rgba(16,24,40,.36); padding: 8px; } /* With the bars gone from the body, the KPI row is the first thing on the page — give it the space the banners used to take. */ body:is(.pm-admin-console,.pm-assistant-console) .nx-head { margin-bottom: 18px; } @media (max-width: 1180px) { body:is(.pm-admin-console,.pm-assistant-console) .pmac__lbl { display: none; } } @media (max-width: 900px) { body:is(.pm-admin-console,.pm-assistant-console) .pmac { display: none; } } /* Log session — the one pill that is an action list, not a notice. Wider, and scrollable so a busy week cannot push the Log buttons off the bottom. */ body:is(.pm-admin-console,.pm-assistant-console) .pmac__pop--wide { width: 470px; } body:is(.pm-admin-console,.pm-assistant-console) .pmac__pop--wide .pmac__pop-bd { max-height: 62vh; overflow-y: auto; } /* The card carries a shimmering border + sparkles for the in-page treatment; inside a popover the frame is the popover, so drop them. */ body:is(.pm-admin-console,.pm-assistant-console) .pmac__pop #adNeedsCard { background: transparent !important; } body:is(.pm-admin-console,.pm-assistant-console) .pmac__pop .ad-action-card__spark { display: none !important; } body:is(.pm-admin-console,.pm-assistant-console) .pmac__pop .ad-action-card__head { padding-top: 0 !important; } /* ── Log session: the "something is waiting on you" signal ──────────────── Caleb 2026-08-16: a premium digital cue for admins and assistants that an important action is pending. Three layers, all subtle on their own: · a radar ping expanding out of the pill, once every 2.6s · a slow breathing glow behind it · a sheen that travels across the icon Deliberately slow. A fast blink reads as an error state; this should read as "standing by", the way a live indicator does. It runs ONLY while the pill exists, and the pill only exists while a session is genuinely unlogged — so it can never nag about nothing. */ body:is(.pm-admin-console,.pm-assistant-console) [data-pmac-slot="needs"] .pmac__btn { position: relative; animation: pmacBreathe 2.6s ease-in-out infinite; } body:is(.pm-admin-console,.pm-assistant-console) [data-pmac-slot="needs"] .pmac__btn::after { content: ''; position: absolute; inset: -1px; border-radius: 999px; border: 1.5px solid #EF5B5B; pointer-events: none; animation: pmacPing 2.6s cubic-bezier(0,0,.2,1) infinite; } @keyframes pmacPing { 0% { transform: scale(.8); opacity: .85; } 70%,100% { transform: scale(1.55); opacity: 0; } } @keyframes pmacBreathe { 0%,100% { box-shadow: 0 0 0 0 rgba(239,91,91,.0), inset 0 0 0 0 rgba(239,91,91,0); } 50% { box-shadow: 0 0 14px 2px rgba(239,91,91,.38), inset 0 0 8px rgba(239,91,91,.18); } } /* Sheen across the glyph — the "digital" note. */ body:is(.pm-admin-console,.pm-assistant-console) [data-pmac-slot="needs"] .pmac__btn svg { position: relative; z-index: 1; animation: pmacSheen 2.6s ease-in-out infinite; } @keyframes pmacSheen { 0%,55%,100% { filter: none; } 70% { filter: drop-shadow(0 0 5px rgba(255,180,180,.95)) brightness(1.25); } } /* Once it is open you are already dealing with it — stop asking. */ body:is(.pm-admin-console,.pm-assistant-console) [data-pmac-slot="needs"] .pmac__btn[aria-expanded="true"], body:is(.pm-admin-console,.pm-assistant-console) [data-pmac-slot="needs"] .pmac__btn[aria-expanded="true"] svg { animation: none; } body:is(.pm-admin-console,.pm-assistant-console) [data-pmac-slot="needs"] .pmac__btn[aria-expanded="true"]::after { display: none; } @media (prefers-reduced-motion: reduce) { body:is(.pm-admin-console,.pm-assistant-console) [data-pmac-slot="needs"] .pmac__btn, body:is(.pm-admin-console,.pm-assistant-console) [data-pmac-slot="needs"] .pmac__btn::after, body:is(.pm-admin-console,.pm-assistant-console) [data-pmac-slot="needs"] .pmac__btn svg { animation: none; } body:is(.pm-admin-console,.pm-assistant-console) [data-pmac-slot="needs"] .pmac__btn { box-shadow: 0 0 0 2px rgba(239,91,91,.5); } } /* Quick bar: hold the space from frame one, reveal once when complete. visibility (not display) so the bar's width is reserved and the top bar never reflows around it as pills resolve. */ body:is(.pm-admin-console,.pm-assistant-console) .pmac { visibility: hidden; opacity: 0; transition: opacity .28s ease; } body:is(.pm-admin-console,.pm-assistant-console) .pmac.is-ready { visibility: visible; opacity: 1; } /* ── Shared pages: the admin console outranks the kid/parent rail ───────── (Caleb 2026-08-16: session-activity-log painted the BLUE parent rail.) Shared pages load kid-sidebar.js, whose pre-paint replays a cached pm.parent_shell / pm.kid_shell flag — including a stale one left over from piloting a family account. kid-sidebar's own reconcile clears it for staff, but the flash is real and it can win the first frame. When the admin console is active, suppress that rail and its pre-paint skeleton entirely; admin-rail owns the gutter here. Family viewers never have pm-admin-console (no flag, no class), so their rails are untouched. */ body:is(.pm-admin-console,.pm-assistant-console) #pmKidSidebar, body:is(.pm-admin-console,.pm-assistant-console) .pmkid-nav, body:is(.pm-admin-console,.pm-assistant-console) #parActions, body:is(.pm-admin-console,.pm-assistant-console) #pmDemoViewSwitch { display: none !important; } body:is(.pm-admin-console,.pm-assistant-console).pm-kid-shell::before { display: none !important; } body:is(.pm-admin-console,.pm-assistant-console).pm-kid-shell, body:is(.pm-admin-console,.pm-assistant-console).pm-kid-shell.pm-parent-rail { padding-left: var(--pmar-w, 250px) !important; background: #F4F7FA !important; } /* ════════════════════════════════════════════════════════════════════════ 9. CALENDAR — LUNO structure (2026-08-16, v3) Caleb: "build this style calendar design exactly instead" (LUNO app-calendar.html). Two earlier dark passes are gone — LUNO's calendar is LIGHT, and that is the whole character: white cells, hairline rules, day numbers top-right, a cream "today", and events as compact solid bars. What makes it read as LUNO rather than "a calendar": · Borders, not gaps. One continuous 1px #DEE2E6 lattice; cells share edges via a single outer border + right/bottom on each cell. · Day numbers sit TOP-RIGHT, regular weight, muted — never bold. · Today is a soft cream wash (#FFF9DB), not a coloured pill. · Events are solid, small-radius bars with white text — flat, no shadow, no gradient. Compact rows, generous cell height around them. · Type is calm: 15px headers, 13px events, weights 400/600. No 800s. ACCENT IS TOKENISED so the palette button still works: swap --cal-accent and every bar, dot and active state follows. See §9b. ════════════════════════════════════════════════════════════════════════ */ body:is(.pm-admin-console,.pm-assistant-console) { --line: #E8EAF0; /* shared hairline — §11 consumes it */ --cal-line: #DEE2E6; --cal-ink: #495057; --cal-ink-mute: #ADB5BD; --cal-today: #FFF9DB; --cal-accent: #4A9FF5; --cal-accent-ink: #FFFFFF; } /* Month title + controls */ body:is(.pm-admin-console,.pm-assistant-console) .pmcal-title { font-family: "Nunito", ui-rounded, system-ui, sans-serif !important; font-size: 27px !important; font-weight: 500 !important; letter-spacing: 0 !important; color: #212529 !important; } body:is(.pm-admin-console,.pm-assistant-console) .pmcal-sub { font-family: "Nunito", ui-rounded, system-ui, sans-serif !important; font-size: 13.5px !important; font-weight: 400 !important; color: #868E96 !important; } /* "today" = grey pill, arrows = dark navy block — LUNO's exact pairing */ body:is(.pm-admin-console,.pm-assistant-console) .pmcal-nav button, body:is(.pm-admin-console,.pm-assistant-console) .pmcal-controls button { font-family: "Nunito", ui-rounded, system-ui, sans-serif !important; font-size: 14px !important; font-weight: 400 !important; background: #E9ECEF !important; color: #495057 !important; border: none !important; border-radius: 7px !important; padding: 9px 18px !important; transition: background .15s ease !important; } body:is(.pm-admin-console,.pm-assistant-console) .pmcal-nav button:hover, body:is(.pm-admin-console,.pm-assistant-console) .pmcal-controls button:hover { background: #DEE2E6 !important; } body:is(.pm-admin-console,.pm-assistant-console) .pmcal-vtoggle { background: transparent !important; border: none !important; padding: 0 !important; gap: 2px !important; } body:is(.pm-admin-console,.pm-assistant-console) .pmcal-vtoggle__btn { font-family: "Nunito", ui-rounded, system-ui, sans-serif !important; font-size: 14px !important; font-weight: 400 !important; background: #343A40 !important; color: #fff !important; border: none !important; border-radius: 7px !important; padding: 9px 16px !important; } body:is(.pm-admin-console,.pm-assistant-console) .pmcal-vtoggle__btn:not(.is-active) { background: #E9ECEF !important; color: #495057 !important; } body:is(.pm-admin-console,.pm-assistant-console) .pmcal-vtoggle__btn.is-active { background: #343A40 !important; color: #fff !important; } /* ── The lattice ── */ /* ════════════════════════════════════════════════════════════════════════ CALENDAR STRUCTURE — must not wait for JavaScript. 2026-08-17 `.pmcal-grid { display:grid; grid-template-columns:repeat(7,1fr) }` was declared ONLY inside js/session-calendar.js (~line 1706), in a string that the script injects as