" or on every wrapper that holds a pane stretched the KPI strip and the chart rows above the last root into screen-tall empty boxes (Oct 14, Analytics and the admin Home), and overflowed the page by the 56px alert banner's height. */ html:not(.is-phone) #page>*:has(>.pane){gap:0} html:not(.is-phone) #page>*>.pane{margin-top:0;margin-bottom:0;box-shadow:inset 0 0 0 .5px var(--hair-2)} /* every page's surface is 80% white over a light blur (the sky shows through), as Overview: a page's wrapper of cards carries it once and its cards go clear (no doubled tint); a lone card carries it itself */ html:not(.is-phone) #page>*:has(.pane){align-content:start;background:rgb(255 255 255/.8);-webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4)} html:not(.is-phone) #page>* .pane{background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none} html:not(.is-phone) #page>.pane{background:rgb(255 255 255/.8);-webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4)} /* FULL HEIGHT (owner, Oct 14): no desktop page ends above the window's bottom edge. #page is a column at least one window tall under the top bar; the page's last visible root takes all the height the others leave, so its surface reaches the bottom at every window size. Zero specificity on purpose: a page that sets its own display, flex or height still wins. A hidden element and a screen-reader-only note (.sr-only, e.g. Analytics' "Loading analytics" after its card) are no root: they never take the growth from the card before them. The rule that names the last visible root uses :has(~ …); it sits in @supports selector(:has(~ *)) so engines without it (jsdom's nwsapi throws) skip it. */ :where(html:not(.is-phone):not(.no-shell) body.app #page){display:flex;flex-direction:column} :where(html:not(.is-phone):not(.no-shell) body.app #page)>:where(*){flex:0 0 auto} @supports selector(:has(~ *)){:where(html:not(.is-phone):not(.no-shell) body.app #page)>:where(:not([hidden],.sr-only):not(:has(~ :not([hidden],.sr-only)))){flex:1 0 auto}} /* …and on the phone. #page keeps its dock clearance (padding-bottom 118px + --ai-clear), so the surface reaches the line above the dock — not behind it — and a short page (a loading or error pane, Notifications, an empty list) no longer ends mid-window over bare sky. Same mechanism and the same guard as desktop: ONLY the last visible root grows, its own children keep their natural height (align-content:start stops a grid root from spreading its extra height over its rows), and a page that is taller than the window never grows at all. Calendar sets its own fixed-height #page on the phone and is outside this (its rule is below in pages/calendar/phone.css). */ html.is-phone:not(.no-shell) body.app #page{display:flex;flex-direction:column} /* not zero-specificity: Book, Home, Analytics, Licensing and Resources lay #page out as a one-column grid on the phone, and a grid cannot hand its leftover height to the last root */ :where(html.is-phone:not(.no-shell) body.app #page)>:where(*){flex:0 0 auto} @supports selector(:has(~ *)){:where(html.is-phone:not(.no-shell) body.app #page)>:where(:not([hidden],.sr-only):not(:has(~ :not([hidden],.sr-only)))){flex:1 0 auto;align-content:start}} /* ===================================================================================================================== Side menu — the ONE place the desktop sidebar is styled (direction B · macOS, owner-approved Oct 14 2026). A flush, full-height 232px column on the kit's chrome glass (--g1) closed by one --sh-1 hairline; 28px rows (--h-side, --r-row); 13px labels set in px (the menu does not follow the browser's root text size); 16px outline glyphs tinted --accent; the current row on --accent-tint (label 500), hover a neutral wash; 11px/600 sentence-case section headers; plain right-aligned counts, Notifications alone with an accent dot; Post a deal pinned under the list as the kit's primary button; one compact account row; the collapse control a bare sidebar.left glyph at the right end of the brand row. This block REPLACES the earlier LumaDial-rail / X-style / Apple-type passes: change it here, never layer overrides on top. Kit tokens only: --g1 + --g1-filter · --sh-1 · --ink-1/2 · --glyph (ink-3) · --accent* · --hair · --r-row · --r-ctl · --h-side · --h-dense · --dur-hover/press · --ease-out. Glyphs are the sb-* family in app/icons.js (Lucide ISC notice there). DOM contract (app/shell.js, read by the first-run tour app/walkthrough/script.js): nav.side[aria-label=Main] · .side .nav a[data-route] · .nbell.bell (data-route=notifications) · .nbell.nmore (its flyout: .menu.xmore, below) · .side-post a.tb-post[data-post-deal] · .sfoot .sacct · button.rail-tg · a `title` on every row. Desktop only: the phone keeps its dock (html.is-phone hides this nav). ===================================================================================================================== */ /* ---------- width: one fixed value on every desktop size; collapsed (html.side-off) the column is gone, the page takes its width ---------- */ html:not(.is-phone):not(.side-off){--w-side:232px} html.side-off:not(.is-phone){--w-side:0px} html.side-off:not(.is-phone) body.app .band{padding-left:52px} /* the band reserves the room the collapse control waits in (12 + 28 + 12) */ /* ---------- the surface: ONE flush, full-height chrome-glass column (the page and band sit flush against it) ---------- */ nav.side{position:fixed;z-index:3;left:0;top:0;bottom:0;width:var(--w-side);display:flex;flex-direction:column; padding:10px 8px 8px;overflow:hidden; background:var(--g1);-webkit-backdrop-filter:var(--g1-filter);backdrop-filter:var(--g1-filter); box-shadow:var(--sh-1); /* one hairline (the kit's --sh-1) closes the column; the page and band sit flush against it */ font:400 13px/1 var(--font-ui);color:var(--ink-1);-webkit-font-smoothing:antialiased} nav.side>*{flex:none} html.side-off nav.side,html.no-shell nav.side{display:none} /* ---------- brand: 20px mark + agency name 13/600; the collapse control lives at the row's right end ---------- */ .side>.brand{display:flex;align-items:center;gap:8px;height:36px;margin:0 0 6px;padding:0 8px} .side .brand-mk{width:20px;height:20px;border-radius:5px;box-shadow:0 0 0 .5px rgb(9 15 23/.35),0 1px 1.5px rgb(9 15 23/.18)} .side .brand .nm{flex:1;min-width:0;padding-right:32px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font:600 13px/1 var(--font-ui);letter-spacing:-.003em;color:var(--ink-1)} /* ---------- collapse / expand: quiet, a bare 28px glyph (sidebar.left) that gains a wash on hover; no circle, no border ---------- */ .rail-tg{position:fixed;z-index:6;top:14px;left:calc(var(--w-side) - 36px);display:grid;place-items:center;width:28px;height:28px;padding:0;border:0;border-radius:var(--r-row); background:none;box-shadow:none;color:var(--glyph);cursor:default;transition:background-color var(--dur-hover) ease,color var(--dur-hover) ease} .rail-tg .i{width:16px;height:16px;stroke-width:2.25} @media (hover:hover){.rail-tg:hover{background:rgb(16 30 42/.06);color:var(--ink-1)}} .rail-tg:active{background:rgb(16 30 42/.1);transition-duration:var(--dur-press)} html.side-off:not(.is-phone) .rail-tg{left:12px} /* collapsed: waits at the band's left edge (the band already reserves 52px) */ html.is-phone .rail-tg,html.no-shell .rail-tg,body:not(.app) .rail-tg{display:none} /* ---------- the list ---------- */ .side .nav{flex:1;min-height:0;display:flex;flex-direction:column;gap:1px;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none} .side .nav::-webkit-scrollbar{display:none} /* row: 28 tall · 8 inset · 16px accent glyph · 8 gap · 13/400 ink-1 · radius 6 (the kit's row radius) */ .side .nav>:is(a,.nbell){position:relative;flex:none;display:flex;align-items:center;gap:8px;width:100%;height:var(--h-side);padding:0 8px;border:0;border-radius:var(--r-row);background:none; font:400 13px/1 var(--font-ui);color:var(--ink-1);text-align:left;white-space:nowrap;cursor:default;-webkit-user-select:none;user-select:none; transition:background-color var(--dur-hover) ease} .side .nav .i{flex:none;width:16px;height:16px;stroke-width:2.25;color:var(--accent)} /* 2.25 units x 16/24 = 1.5px on screen; macOS tints every sidebar glyph */ /* states: hover = a faint neutral wash · pressed = a step darker, instantly · current = the kit's selection tint (--accent-tint, as table rows and chips use), label one weight up. Neutral vs blue keeps "hover" and "you are here" unmistakable. */ @media (hover:hover){.side .nav>:is(a,.nbell):not([aria-current=page],.is-current,[aria-expanded=true]):hover{background:rgb(16 30 42/.055)}} .side .nav>:is(a,.nbell):active{background:rgb(16 30 42/.09);transition-duration:var(--dur-press)} .side .nav>a[aria-current=page],.side .nav>.nbell.is-current,.side .nav>.nbell[aria-expanded=true]{background:var(--accent-tint);font-weight:500} .side .nav>:is(a,.nbell):focus-visible{outline:2px solid var(--accent);outline-offset:-2px} /* section headers: 11/600 --glyph, sentence case, aligned to the glyph column */ .side .nav .grp{flex:none;display:flex;align-items:center;height:20px;margin:14px 0 2px;padding:0 8px;font:600 11px/1 var(--font-ui);letter-spacing:.01em;color:var(--glyph);cursor:default} /* counts: plain right-aligned numerals in --glyph. Notifications alone carries an accent dot (6px) before its count. */ .side .nav .n{margin-left:auto;padding:0;border:0;border-radius:0;background:none;font:400 12px/1 var(--font-ui);font-variant-numeric:tabular-nums;color:var(--glyph)} .side .nav .badge{position:static;margin-left:auto;display:inline-flex;align-items:center;gap:5px;min-width:0;height:auto;padding:0;border:0;border-radius:0;background:none;box-shadow:none; font:500 12px/1 var(--font-ui);font-variant-numeric:tabular-nums;text-align:left;color:var(--ink-2);pointer-events:none} .side .nav .badge::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:var(--accent)} .side .nav a .tag{margin-left:auto} /* the locked Lapse Bot's "Pro" · a row tag, unchanged kit tag */ /* locked Lapse Bot (isFreePlan || !lapseBotEntitled, D40) keeps its row, muted, with a bare "Pro" tag → Billing (production: AgentOsSidebar locked branch) */ .side .nav a.is-locked{color:var(--ink-2)}.side .nav a.is-locked .i{color:var(--glyph)} .side .nav a .lk{margin-left:auto;display:inline-flex;color:var(--ntc)}.side .nav a .lk .i{width:13px;height:13px;color:inherit} /* NIPR lock (shell.js updateCounts) */ .side .nav a .n+.lk{margin-left:6px} /* ---------- Post a deal: the kit's own primary button (28 tall, r8), pinned under the list, full width, plain (no glow) ---------- */ .side .side-post{margin:8px 0 0} .side .side-post .tb-post{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;height:var(--h-dense);padding:0 12px;border-radius:var(--r-ctl); background:var(--accent-sheen) var(--accent);color:var(--on-accent);font:500 13px/1 var(--font-ui);white-space:nowrap; box-shadow:0 0 0 .5px rgb(18 74 150/.6),0 1px 2px rgb(18 74 150/.24),inset 0 1px 0 rgb(255 255 255/.2); transition:transform var(--dur-press) var(--ease-out),background-color var(--dur-hover) ease} .side .side-post .tb-post .i{width:14px;height:14px;stroke-width:2.5;color:inherit} .side .side-post .tb-post::before,.side .side-post .tb-post::after{content:none} @media (hover:hover){.side .side-post .tb-post:hover{background-color:var(--accent-hover)}} .side .side-post .tb-post:active{transform:scale(.97)} .side .side-post .tb-post:focus-visible{outline:2px solid var(--accent);outline-offset:2px} /* ---------- account: one compact row. Avatar 24 · name 13/500 · org 11 --glyph · a bare sign-out glyph ---------- */ .side .sfoot{margin-top:8px;padding:8px 0 0;border-top:1px solid var(--hair)} .side .scard{display:flex;align-items:center;gap:2px} .side .sfoot>.mirror-tag{margin:0 var(--s2) var(--s2)} /* mirror mode only: the one quiet chip above the account card */ .side .sacct{flex:1;min-width:0;display:flex;align-items:center;gap:8px;height:40px;padding:0 6px 0 8px;border:0;border-radius:var(--r-row);background:none; text-align:left;color:var(--ink-1);cursor:default;transition:background-color var(--dur-hover) ease} @media (hover:hover){.side .sacct:hover{background:rgb(16 30 42/.055)}} .side .sacct:active{background:rgb(16 30 42/.09);transition-duration:var(--dur-press)} .side .sacct[aria-expanded=true]{background:rgb(16 30 42/.09)} .side .sacct .av{position:relative;width:24px;height:24px;font:600 10px/1 var(--font-ui);background:linear-gradient(150deg,var(--sky-2),var(--sky))} /* the kit's sky avatar, one step deeper so it holds on glass */ .side .sacct .av .on{display:none} /* the always-on presence dot is decoration */ .side .sacct .who{flex:1;min-width:0;display:grid;gap:1px} .side .sacct .who b{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font:500 13px/16px var(--font-ui);color:var(--ink-1)} .side .sacct .chev{flex:none;display:grid;place-items:center;color:var(--glyph)} /* the account card is a switcher (more than one workspace): a quiet chevron, no caption */ .side .sacct .who span{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font:400 11px/14px var(--font-ui);color:var(--glyph)} .side .sout{flex:none;color:var(--glyph)} .side .sout .i{width:16px;height:16px;stroke-width:2.25;color:inherit} @media (hover:hover){.side .sout:hover{color:var(--ink-1)}} /* ---------- More: the flyout beside the column (app/shell.js sideMoreMenu · app/overlays.js align 'right-up': bottom edge level with the More row, growing upward, kept inside the window). The same recipe as the rows above on the kit's menu: an OPAQUE float surface (it sits over live page content, so no see-through), 6px inset · 12 radius · the kit float shadow; rows 28 · 13/400 in px · 16px sb-* glyphs at 1.5px in --ink-2 · counts and group labels in --glyph; hover and keyboard highlight = the selection tint with ink text (the kit's other menus keep their accent fill); one --hair rule between groups. Keyboard focus keeps the ring, inset like the rows' ---------- */ .menu.xmore{padding:6px;background:var(--lg-card);-webkit-backdrop-filter:none;backdrop-filter:none;font:400 13px/1 var(--font-ui);color:var(--ink-1)} .menu.xmore [role^=menuitem]{gap:8px;height:var(--h-side);padding:0 8px;font:400 13px/1 var(--font-ui);color:var(--ink-1);-webkit-user-select:none;user-select:none} .menu.xmore .i{width:16px;height:16px;stroke-width:2.25;color:var(--ink-2)} .menu.xmore .is-hl,.menu.xmore [role^=menuitem]:hover:not([aria-disabled=true]){background:var(--accent-tint);color:var(--ink-1)} .menu.xmore .is-hl .i,.menu.xmore [role^=menuitem]:hover:not([aria-disabled=true]) .i{color:var(--ink-2)} .menu.xmore [role^=menuitem]:focus-visible{outline-offset:-2px} .menu.xmore .ct{margin-left:auto;padding-left:12px;font:400 12px/1 var(--font-ui);font-variant-numeric:tabular-nums;color:var(--glyph)} .menu.xmore hr{margin:5px 8px;background:var(--hair)} .menu.xmore .mlabel{display:flex;align-items:center;height:20px;margin:6px 0 2px;padding:0 8px;font:600 11px/1 var(--font-ui);letter-spacing:.01em;color:var(--glyph)} @media (prefers-contrast:more){ .menu.xmore .ct,.menu.xmore .mlabel{color:var(--ink-2)} .menu.xmore hr{background:var(--edge-hc)} } @media (forced-colors:active){ .menu.xmore .is-hl,.menu.xmore [role^=menuitem]:hover:not([aria-disabled=true]){background:Highlight;color:HighlightText;forced-color-adjust:none} .menu.xmore .is-hl :is(.i,.ct),.menu.xmore [role^=menuitem]:hover:not([aria-disabled=true]) :is(.i,.ct){color:HighlightText} } /* ---------- short windows: tighten the air, never the type; below ~640 the list scrolls inside itself ---------- */ @media (max-height:700px){ nav.side{padding-top:8px} .side .nav .grp{margin-top:10px} .side>.brand{margin-bottom:2px} } /* Matthew's tactile primary controls (Oct 21), adapted to keep the full hit target fixed. The existing hover color remains; a pointer press uses a solid, contrast-safe accent fill. Scaling the control itself can move an edge out from under a held pointer and lose the click. */ html :is(.btn.pri,.side .side-post .tb-post),html :is(.btn.pri,.side .side-post .tb-post):active{transform:none;opacity:1;transition:background-color var(--dur-press) var(--ease-out)} @media (prefers-reduced-motion:no-preference){ html[data-input-modality=pointer] :is(.btn.pri,.side .side-post .tb-post):active:not(:disabled,[aria-disabled=true],[aria-busy=true]){background-color:var(--accent-hover);background-image:none;color:var(--on-accent)} } html[data-input-modality=keyboard] :is(.btn.pri,.side .side-post .tb-post){opacity:1;transition:none} html :is(.btn.pri,.side .side-post .tb-post):is(:disabled,[aria-disabled=true],[aria-busy=true]){opacity:1;transition:background-color var(--dur-hover) ease} @media (prefers-reduced-motion:reduce){ html :is(.btn.pri,.side .side-post .tb-post){opacity:1;transition:background-color var(--dur-hover) ease} } /* ---------- adaptivity ---------- */ @media (prefers-reduced-motion:reduce){.side .side-post .tb-post:active{transform:none}} @media (prefers-contrast:more){ .side .nav>a[aria-current=page],.side .nav>.nbell.is-current{box-shadow:inset 0 0 0 1px var(--edge-hc)} .side .nav .grp,.side .nav .n,.side .sacct .who span{color:var(--ink-2)} } @media (forced-colors:active){ .side .nav>a[aria-current=page],.side .nav>.nbell.is-current{background:Highlight;color:HighlightText;forced-color-adjust:none} .side .nav>a[aria-current=page] .i,.side .nav>.nbell.is-current .i{color:HighlightText} .side .side-post .tb-post{forced-color-adjust:none} } /* Intake preparation/recovery owns only its content, not the Search palette's fixed 640px workspace. Keep the same dialog chrome without a second card. */ dialog.center-sheet.deal-read-modal{inset:0;margin:auto;max-width:560px;height:fit-content;max-height:calc(100dvh - 32px)} .deal-read-modal .sheet-body{flex:initial;padding:0} .deal-read-modal .live-state{border:0;border-radius:0;background:transparent;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none} .deal-read-modal .live-state::before{display:none} .deal-read-modal .pane{position:relative} /* the global .pane is absolute (v3-base); outside #page nothing overrides it, so the loading skeleton and the state pane escaped the frame */ .deal-read-modal .route-loading{padding:16px 20px 20px} .deal-read-modal .route-loading .pane{padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none} .deal-read-modal .route-loading .pane::before{display:none} /* ---------- Atlas AI clear zone (P7) ---------- The launcher is a 44 px disc fixed in the bottom-right gutter (right 12 / bottom 12; phone right 21 / bottom 94, stacked above the Post a deal +). While it renders, app/ai-popup.js sets html[data-ai-launcher]; --ai-clear is 0 without it, so every rule below is a no-op for a page that has no launcher. The rule: a page keeps filling the window and its SCROLL CONTAINER reserves --ai-clear at the end, so the last row or control scrolls clear of the disc; a bar stuck to the bottom cannot scroll and takes a right or bottom inset instead; empty pane padding and decoration may sit under the disc. A new scroll container adds padding-bottom:var(--ai-clear), a new bottom-stuck bar adds the inset, one line each (the page's own page.css; the P7 probe, scripts/live-adapters/ ai-clear-zone.browser.test.mjs, scrolls every scroller to its end and fails on a control under the disc). */ :root{--ai-clear:0px} html[data-ai-launcher]{--ai-clear:64px} /* 12 gutter + 44 disc + 8 gap */ html.is-phone[data-ai-launcher]{--ai-clear:28px} /* beyond #page's 118 dock clearance: 94 + 44 + 8 = 146 */ html{scroll-padding-bottom:var(--ai-clear)} .is-phone #page{padding-bottom:calc(118px + var(--ai-clear))} /* Window-scrolled desktop pages: the last visible child extends (its surface still fills). The fixed-viewport workspaces are left out — their scroll containers pad themselves in their own page.css, and a second reserve here would pull their surfaces off the window bottom: Book, Scoreboard, Calendar, Retention, Rates, Resources, the Home dashboard (agent and agency admin alike), the Annuities desk board (a page with a .brd), and the Requests ledger and inbox (.cxd, .org.ibx). The rule names the last visible root with :has(~ …), so it sits in @supports (engines without it, jsdom's nwsapi among them, skip it). */ @supports selector(:has(~ *)){html[data-ai-launcher]:not(.is-phone) body.app #page:not([data-page="calendar"],[data-page^="lapse-bot"],[data-page^="retention"],[data-page="book"],[data-page="training"],[data-page="scoreboard"],[data-page="annuity-rates"],[data-page="resources"],[data-page="overview"]:has(>.db),[data-page="annuities"]:has(>.brd),[data-page="carrier-requests"]:has(>.cxd,>.org.ibx))>:where(:not([hidden]):not(:has(~ :not([hidden])))){padding-bottom:var(--ai-clear)}} /* Calendar — its own files are being edited; these move to pages/calendar/*.css when that work lands. Higher specificity than the page's own rules: the html[data-ai-launcher] prefix also keeps them inert without the launcher. */ html[data-ai-launcher] [data-page="calendar"] .tg-scroll{padding-bottom:var(--ai-clear)} html.is-phone[data-ai-launcher] [data-page="calendar"] .tg-scroll{padding-bottom:calc(118px + var(--ai-clear))} html[data-ai-launcher] [data-page="calendar"] .ag{padding-bottom:calc(24px + var(--ai-clear))} html.is-phone[data-ai-launcher] [data-page="calendar"] .ag{padding-bottom:calc(118px + var(--ai-clear))}