/* ══════════════════════════════════════════════════════════════════════════ AURORA GLASS V2 — V1 dashboard skin + THE FRAME (UI-SKIN-LOCK-2026-08-09 §1–§2, BRIEF-DASH-AURORA-V2-FRAME-2026-08-09). Reference render: MOCK-SKIN-1C-AURORA-GLASS-V3. SCOPE LAW (V2): the --au-* tokens now live at :root and the FRAME — sidebar, header, tab strip, aurora field, dashboard canvas density — binds APP-WIDE. Page CONTENT areas other than the dashboard keep their current skin and migrate module-by-module (§5 rollout — mixed-skin interim is ACCEPTED). V1's #page-dashboard widget rules are unchanged below. MOTION LAW (§2): every animation/transition lives inside a prefers-reduced-motion: no-preference guard — reduced-motion users get the full layout with zero motion. Tokens copied exactly from MOCK-SKIN-1C :root / body.light (L8: light is a designed twin, not an invert). ══════════════════════════════════════════ */ :root{ --au-glass:rgba(20,26,48,.55); --au-glass2:rgba(28,35,64,.5); --au-line:rgba(126,140,255,.14); --au-line2:rgba(126,140,255,.3); --au-ink:#eef1ff; --au-mut:#9aa4c7; --au-dim:#5d6689; /* V3.2.1 QA POLISH item 6 (2026-08-10): --au-dim measures ~3.1:1 against the header glass — fails WCAG AA (4.5:1) at chrome sizes (Jon: "very small and very faint… the date at the top"). --au-dim2 is a brighter sibling for topbar/sidebar/dashboard-header caption text only (~5.75:1 computed against the same background) — --au-dim itself is untouched so dashboard- body widgets tuned against it elsewhere are not disturbed by this item's scope. */ --au-dim2:#8a93b8; --au-a1:#7c6cff; --au-a2:#3fd4ff; --au-grad:linear-gradient(120deg,#7c6cff,#3fd4ff); --au-good:#3ce6a6; --au-goodbg:rgba(60,230,166,.13); --au-warn:#ffc24b; --au-warnbg:rgba(255,194,75,.13); --au-bad:#ff5d8f; --au-badbg:rgba(255,93,143,.14); --au-sh:0 14px 40px rgba(0,0,0,.42); --au-num:'Space Grotesk',sans-serif; --au-disp:'Space Grotesk',sans-serif; } [data-theme="light"]{ --au-glass:rgba(255,255,255,.74); --au-glass2:rgba(255,255,255,.92); --au-line:rgba(78,90,200,.15); --au-line2:rgba(78,90,200,.32); --au-ink:#171c33; --au-mut:#5a6285; --au-dim:#9aa1c0; --au-a1:#5a49f0; --au-a2:#0993c9; --au-grad:linear-gradient(120deg,#5a49f0,#0993c9); --au-good:#0b9e6c; --au-goodbg:rgba(11,158,108,.1); --au-warn:#b06a00; --au-warnbg:rgba(176,106,0,.1); --au-bad:#d61f63; --au-badbg:rgba(214,31,99,.09); --au-sh:0 14px 32px rgba(38,44,94,.12); } /* ── V2: the page background + aurora field bind app-wide (scope 5). The field's markup lives at #app level now — display:none on #app pre-login hides it, so the login screen keeps its own backdrop. Both themes designed (L8). ── */ body{background:#070a14} /* AURORA V3 scope 4: layered porcelain canvas — a real surface, not a flat tint */ [data-theme="light"] body{background:linear-gradient(180deg,#f7f9ff 0%,#e9edfb 38%,#e3e8f8 100%) fixed} /* aurora blobs — position:fixed + z-index:-1 = behind all content, same mechanism as the mock. Static (no drift) under reduced motion. */ .dash-aurora{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none} .dash-aurora i{position:absolute;border-radius:50%;filter:blur(90px);opacity:.5} [data-theme="light"] .dash-aurora i{opacity:.33} .dash-aurora i:nth-child(1){width:640px;height:520px;left:-160px;top:-180px;background:radial-gradient(circle,#5a49f0,transparent 65%)} .dash-aurora i:nth-child(2){width:700px;height:560px;right:-220px;top:-120px;background:radial-gradient(circle,#0aa9d8,transparent 65%)} .dash-aurora i:nth-child(3){width:520px;height:460px;left:34%;bottom:-260px;background:radial-gradient(circle,#8a3ff0,transparent 65%)} @media (prefers-reduced-motion: no-preference){ .dash-aurora i{animation:auDrift 18s ease-in-out infinite alternate} .dash-aurora i:nth-child(2){animation-delay:-6s} .dash-aurora i:nth-child(3){animation-delay:-11s} @keyframes auDrift{to{transform:translate(50px,36px) scale(1.08)}} } /* ── widget frame v2: every card gets the 1C glass grammar ── */ #page-dashboard .card{ background:var(--au-glass);border:1px solid var(--au-line);border-radius:16px; box-shadow:var(--au-sh);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px); position:relative;overflow:hidden; } #page-dashboard .card::before{content:"";position:absolute;inset:0 0 auto;height:1.5px;background:var(--au-grad);opacity:.7;pointer-events:none} #page-dashboard .card h3{font-family:var(--au-disp);font-weight:600;letter-spacing:-.01em} #page-dashboard h1{font-family:var(--au-disp);letter-spacing:-.02em} @media (prefers-reduced-motion: no-preference){ #page-dashboard .card{transition:transform .25s cubic-bezier(.34,1.3,.5,1),border-color .2s} #page-dashboard .card:hover{transform:translateY(-2px);border-color:var(--au-line2)} #page-dashboard .grid4 .card.stat:hover{transform:translateY(-3px) perspective(600px) rotateX(2deg)} /* sheen sweep (§2) */ #page-dashboard .card::after{content:"";position:absolute;top:0;bottom:0;width:60%;left:-80%;transform:skewX(-18deg); background:linear-gradient(90deg,transparent,rgba(255,255,255,.05),transparent);transition:left .6s;pointer-events:none} #page-dashboard .card:hover::after{left:130%} } /* ── stat cards: mono numerals + verdict chip top-right + honest progress bar ── The verdict pill is the one renderStatSubs() already computes (D2B) — the skin floats it to the mock's chip position; id-selector specificity beats the [data-theme=light] gradient-text rules in style.css. */ #page-dashboard .stat{position:relative} #page-dashboard .stat .n, [data-theme="light"] #page-dashboard .stat .n{ font-family:var(--au-num);font-variant-numeric:tabular-nums;font-weight:700;font-size:27px; background:none;-webkit-background-clip:initial;background-clip:initial;color:var(--au-ink)} #page-dashboard .stat .n.orange,[data-theme="light"] #page-dashboard .stat .n.orange{background:none;color:var(--au-warn)} #page-dashboard .stat .n.teal,[data-theme="light"] #page-dashboard .stat .n.teal{background:none;color:var(--au-good)} #page-dashboard .stat .l{font-family:var(--au-disp);font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--au-dim)} #page-dashboard .stat .stat-sub{color:var(--au-mut)} #page-dashboard .stat .stat-sub .pill{ position:absolute;top:12px;right:12px;margin:0; font-family:var(--au-disp);font-weight:700;font-size:10px;letter-spacing:.05em;text-transform:uppercase; border-radius:999px;padding:3px 10px} #page-dashboard .pill.ok{background:var(--au-goodbg);color:var(--au-good)} #page-dashboard .pill.warn{background:var(--au-warnbg);color:var(--au-warn)} #page-dashboard .pill.err{background:var(--au-badbg);color:var(--au-bad)} #page-dashboard .abar{height:4px;border-radius:4px;background:rgba(125,135,180,.15);margin-top:10px;overflow:hidden} #page-dashboard .abar i{display:block;height:100%;border-radius:4px;background:var(--au-grad);width:0} #page-dashboard .abar.warn i{background:linear-gradient(90deg,#ffc24b,#ff8a5c)} @media (prefers-reduced-motion: no-preference){ #page-dashboard .abar i{transition:width 1.1s cubic-bezier(.4,0,.2,1)} } /* ── agenda7 — the mock-1 centerpiece: fixed height, scrolls, bottom fade mask ── */ #page-dashboard .ag7{height:335px;overflow-y:auto;scrollbar-width:thin;position:relative; mask-image:linear-gradient(180deg,#000 92%,transparent);-webkit-mask-image:linear-gradient(180deg,#000 92%,transparent)} #page-dashboard .ag7-day{display:flex;border-top:1px solid var(--au-line)} #page-dashboard .ag7-day .dl{width:64px;flex:none;padding:12px 0 12px 4px} #page-dashboard .ag7-day .dl b{font-family:var(--au-disp);font-size:12px;display:block} #page-dashboard .ag7-day .dl span{font-family:var(--au-num);font-variant-numeric:tabular-nums;font-size:10px;color:var(--au-dim)} #page-dashboard .ag7-day.today-row{background:rgba(124,108,255,.06)} #page-dashboard .ag7-day.today-row .dl b{color:var(--au-a2)} #page-dashboard .ag7-items{flex:1;padding:9px 8px 9px 0;display:flex;flex-direction:column;gap:5px;min-width:0} #page-dashboard .ag7 .ev{display:flex;gap:9px;align-items:center;padding:6px 10px;border-radius:9px;font-size:12.5px;border:1px solid transparent} #page-dashboard .ag7 .ev.click{cursor:pointer} #page-dashboard .ag7 .ev .t{font-family:var(--au-num);font-variant-numeric:tabular-nums;font-size:11.5px;letter-spacing:.04em;color:var(--au-a2);min-width:58px;flex:none} #page-dashboard .ag7 .ev .dot2{width:7px;height:7px;border-radius:3px;flex:none} #page-dashboard .ag7 .ev .dot2.m{background:var(--au-a1);box-shadow:0 0 8px rgba(124,108,255,.6)} #page-dashboard .ag7 .ev .dot2.a{background:var(--au-warn)} #page-dashboard .ag7 .ev .lbl{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0} #page-dashboard .ag7 .ev .who2{margin-left:auto;font-size:10.5px;color:var(--au-dim);flex:none} #page-dashboard .ag7 .ev .chk{width:15px;height:15px;border-radius:5px;border:1.5px solid var(--au-line2);flex:none;cursor:pointer;display:grid;place-items:center;font-size:9px;color:transparent} #page-dashboard .ag7 .ev .chk:hover{border-color:var(--au-good);color:var(--au-good)} #page-dashboard .ag7 .ev.quiet{color:var(--au-dim)} @media (prefers-reduced-motion: no-preference){ #page-dashboard .ag7 .ev{transition:.15s} #page-dashboard .ag7 .ev.click:hover,#page-dashboard .ag7 .ev:has(.chk):hover{border-color:var(--au-line2);background:rgba(124,108,255,.07);padding-left:14px} } /* ── needs_human — oldest pressure first ── */ #page-dashboard .nh-row{display:flex;gap:12px;align-items:center;padding:10px 4px;border-top:1px solid var(--au-line);font-size:13px;cursor:pointer} #page-dashboard .nh-row .dot{width:28px;height:28px;border-radius:50%;background:var(--au-grad);display:grid;place-items:center;font-size:10px;font-weight:800;color:#fff;flex:none} #page-dashboard .nh-row .nm{font-weight:500;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} #page-dashboard .nh-row .nm small{color:var(--au-dim);margin-left:8px;font-family:var(--au-num);font-variant-numeric:tabular-nums;font-size:10.5px} #page-dashboard .nh-st{border-radius:999px;padding:3px 10px;font-size:10.5px;font-weight:600;flex:none} #page-dashboard .nh-st.miss{background:var(--au-warnbg);color:var(--au-warn)} #page-dashboard .nh-st.rev{background:var(--au-goodbg);color:var(--au-good)} #page-dashboard .nh-st.prep{background:rgba(124,108,255,.15);color:var(--au-a1)} #page-dashboard .nh-st.sig{background:rgba(63,212,255,.13);color:var(--au-a2)} #page-dashboard .nh-days{font-family:var(--au-num);font-variant-numeric:tabular-nums;font-size:11.5px;color:var(--au-dim);flex:none;min-width:34px;text-align:right} #page-dashboard .nh-days.hot{color:var(--au-bad);font-weight:700} @media (prefers-reduced-motion: no-preference){ #page-dashboard .nh-row{transition:.15s} #page-dashboard .nh-row:hover{background:rgba(124,108,255,.05);padding-left:8px} } /* ── promise_ledger — "you said you would…" ── */ #page-dashboard .pr{display:flex;gap:10px;align-items:flex-start;padding:10px 4px;border-top:1px solid var(--au-line);font-size:12.5px} #page-dashboard .pr .q{color:var(--au-a2);flex:none;font-size:14px} #page-dashboard .pr .tt{color:var(--au-mut);min-width:0} #page-dashboard .pr .tt b{color:var(--au-ink)} #page-dashboard .pr .src{font-size:10.5px;color:var(--au-dim);font-family:var(--au-num);font-variant-numeric:tabular-nums} #page-dashboard .pr .due-chip{font-size:11px;color:var(--au-warn)} #page-dashboard .pr .due-chip.hot{color:var(--au-bad);font-weight:700} /* PB-WAVE-2 PART B — "You said you would…" verb row (Did it · Won't do · Still on it). Verbs sit UNDER the quote on their own line rather than inline, so a long commitment never pushes them off the card's right edge (the 232px sidebar leaves this half-width widget genuinely narrow). No shame styling on "Won't do" — LOCK ② is explicit that declining is a first-class answer, so all three buttons share one neutral treatment. */ #page-dashboard .pr .pl-verbs{display:flex;gap:6px;flex-wrap:wrap;margin-top:7px} #page-dashboard .pr .pl-verbs .btn{font-size:11.5px;padding:3px 9px} #page-dashboard .pr .pl-verbs .btn:disabled{cursor:default} @media (prefers-reduced-motion: no-preference){ #page-dashboard .pr{transition:.15s} #page-dashboard .pr:hover{background:rgba(124,108,255,.05);padding-left:8px} } /* ── season_pace ── */ #page-dashboard .sp-n{font-family:var(--au-num);font-variant-numeric:tabular-nums;font-size:26px;font-weight:700;color:var(--au-good);margin:2px 0} #page-dashboard .sp-line{font-size:12px;color:var(--au-mut)} #page-dashboard .sp-line b{color:var(--au-ink);font-family:var(--au-num);font-variant-numeric:tabular-nums} #page-dashboard .pacebar{display:flex;height:7px;border-radius:6px;overflow:hidden;margin-top:12px;background:rgba(125,135,180,.15)} #page-dashboard .pacebar i{height:100%} #page-dashboard .sp-lg{display:flex;gap:12px;margin-top:8px;font-size:10.5px;color:var(--au-dim);font-family:var(--au-num);font-variant-numeric:tabular-nums} #page-dashboard .sp-note{font-size:11px;color:var(--au-dim);margin-top:10px;line-height:1.5} /* ── ⓘ explainer (skin-lock §4) — button rides every widget header; the popover is a single reusable element, app-token styled so it renders in both themes. ── */ .dw-info{border:none;background:none;color:var(--text2);font-size:13px;line-height:1;cursor:pointer;padding:1px 4px;margin-left:6px;opacity:.55;border-radius:50%;vertical-align:middle} .dw-info:hover{opacity:1;color:var(--accent)} .dw-info-float{position:absolute;top:8px;right:10px;z-index:2} #dw-info-pop{position:fixed;z-index:120;width:330px;max-width:92vw;display:none;background:var(--bg2);border:1px solid var(--line);border-radius:14px;padding:14px 16px;box-shadow:0 18px 50px var(--shadow);font-size:12.5px;line-height:1.55} #dw-info-pop.open{display:block} #dw-info-pop>b{display:block;margin-bottom:8px;font-size:13px} #dw-info-pop .dwi-row{margin-bottom:7px;color:var(--text2)} #dw-info-pop .dwi-row:last-child{margin-bottom:0} #dw-info-pop .dwi-row span{display:block;font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;opacity:.65;font-weight:700;margin-bottom:2px} /* add-widget gallery: same explainer per widget so people choose informed (§4) */ #dw-add .dw-gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:10px} #dw-add .dw-gal-item{border:1px solid var(--line);border-radius:12px;padding:10px 12px;background:var(--card)} #dw-add .dw-gal-head{display:flex;align-items:center;gap:8px} #dw-add .dw-gal-head b{font-size:13px} #dw-add .dw-gal-note{font-size:11.5px;color:var(--text2);margin-top:6px;line-height:1.5} /* K1 drag-to-reorder affordance (behavior lives in app.js) */ .wf-tab{touch-action:pan-y} .wf-tab.dragging{opacity:.85;position:relative;z-index:50} /* ══════════════════════════════════════════════════════════════════════════ AURORA V2 — THE FRAME (BRIEF-DASH-AURORA-V2-FRAME-2026-08-09 scopes 2,3,4,7). Every value below is copied from MOCK-SKIN-1C-AURORA-GLASS-V3-2026-08-09.html (aside/nav/header/.strip/.tab/.today/.eng/h1/.trust/.kevin) — selectors adapted to the app's real DOM, mechanics untouched. All motion lives inside prefers-reduced-motion guards. Mobile (≤820px) keeps its own shell geometry — desktop layout overrides are scoped min-width:821px so the v1.79 mobile rules in style.css keep winning there. ══════════════════════════════════════════════════════════════════════════ */ /* ── sidebar → aurora glass (mock aside) ── */ .sidebar{background:var(--au-glass);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px); border-right:1px solid var(--au-line);padding:14px 10px 12px;color:var(--au-ink)} /* L8: porcelain rail in light mode — the v1.47.1 dark-rail re-declaration in style.css is retired by re-declaring the same vars with the mock's light tokens, so every legacy var()-consumer inside the rail (status menu, nudges, foot links, ver stamp) renders correctly on porcelain with zero per-element edits. */ /* ⭐ v3.2.5 (Jon ruling, live QA 08-11): IN LIGHT MODE THE SIDEBAR STAYS DARK — a contrast frame around the light canvas. Both token families (au-* + legacy) re-pinned to their dark values scoped to the rail, and the glass becomes a SOLID dark paint (translucent glass over the light aurora field reads muddy). Every var()-consumer inside the rail follows. */ [data-theme="light"] .sidebar{ --au-glass:rgba(20,26,48,.55); --au-glass2:rgba(28,35,64,.5); --au-line:rgba(126,140,255,.14); --au-line2:rgba(126,140,255,.3); --au-ink:#eef1ff; --au-mut:#9aa4c7; --au-dim:#5d6689; --au-dim2:#8a93b8; --au-a1:#7c6cff; --au-a2:#3fd4ff; --au-grad:linear-gradient(120deg,#7c6cff,#3fd4ff); --bg:#0a0f2e; --bg2:#141a38; --card:#1a2150; --line:rgba(126,140,255,.14); --text:#eef1ff; --text2:#9aa4c7; --teal:#3fd4ff; --accent:#3fd4ff; --hover:rgba(126,140,255,.08); --hover2:rgba(126,140,255,.14); --rowline:rgba(126,140,255,.12); --shadow:rgba(0,0,0,.4); background:#0d1233; border-right:1px solid rgba(126,140,255,.18); } .sidebar .brand{padding:6px 10px 14px} /* V3.2.1 QA POLISH item 5 (2026-08-10): real lockup above the firm name; firm name demoted to a small caption underneath (was the sole 17px headline before — the app's own product identity now carries that weight). */ /* v3.2.3 QB (Jon): top-left brand = the TENANT FIRM's logo (velocity-logo.png, like the old UI), NOT the taxapp lockup — taxapp branding lives in the "Powered by" foot. 1500×277 source. */ .au-firmlogo{display:block;height:32px;width:auto;max-width:100%;margin:2px auto 4px} /* v3.2.6 Jon: centered, bigger */ .sidebar .brand{text-align:center} #au-firm-name{display:none} /* v3.2.6 Jon: logo only — node kept for org_settings tenant wiring */ .au-firmlogo-forlight{display:none} /* v3.2.5: rail is dark in both themes (Jon ruling) — white-ink logo everywhere; dark-ink variant kept in img/ for future tenant/light-rail use */ body.rail .brand{display:none} /* collapse: logo was clipping to "taxa" — hide the brand block on rail */ .au-logo{font-family:var(--au-disp);font-weight:600;font-size:12px;letter-spacing:-.01em;white-space:nowrap;color:var(--au-dim2);padding-left:2px} /* item 6: --au-dim2, not --au-dim — same floor as the rest of this pass */ .au-logo b{background:var(--au-grad);-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:700} /* nav rows — mock nav a. Children keep their own indent grammar below. */ .nav-item{gap:11px;padding:8px 11px;border-radius:11px;font-size:14px;font-weight:400; color:var(--au-mut);margin-bottom:2px} .nav-item:hover{color:var(--au-ink);background:rgba(124,108,255,.08)} .nav-item:not(.nav-child):hover{padding-left:15px} /* the +4px indent Kevin loved */ .nav-item.active{color:var(--au-ink);background:linear-gradient(90deg,rgba(124,108,255,.22),rgba(63,212,255,.08));font-weight:600;border:none} .nav-item.active::before{left:0;top:20%;bottom:20%;width:2.5px;border-radius:3px;background:var(--au-grad);box-shadow:0 0 10px var(--au-a1)} .sidebar .nav-item .nico{color:currentColor;opacity:.9;filter:none} /* monochrome — the row color carries state, ignites via .active's gradient text-color below */ .sidebar .nav-item.active .nico{filter:none} /* V3.2.1 QA POLISH item 4 (2026-08-10): REVERTS the interim AURORA V3 POLISH item 5 Unicode-glyph rail (◪ ☑ ◉ ▤ Σ ▦ ✉ ◈ ⚙ span, font-size-based) back to real inline-SVG Lucide icons per the 3rd-pass QB icon ruling — one unmistakable silhouette per nav item, base .nico rule (style.css, 20px/stroke-1.75) now applies unmodified inside the sidebar instead of being overridden. */ .sidebar .nav-item > .nico{display:inline-flex;align-items:center;justify-content:center;flex:none} .nav-label{overflow:hidden} .navbadge{background:var(--au-grad);color:#fff;font-size:9.5px;font-weight:800;border-radius:999px;padding:1px 7px;font-family:var(--au-num);font-variant-numeric:tabular-nums} /* fix-batch-1.js injects ".navbadge{background:#C2244B !important}" at runtime (QA-S4 AA fix, premised on the retired always-dark rail). The ratified mock badge is the gradient pill — higher-specificity !important wins among importants regardless of injection order. Contrast note flagged in the results doc for QB's merge-time FABLE-CONFIRM. */ .sidebar .navbadge{background:var(--au-grad) !important} .sidebar .nav-caret{border:none;background:none;width:18px;height:18px;font-size:11px;color:var(--au-dim2);border-radius:0} /* item 6: was 10px @ --au-dim */ .sidebar .nav-caret:hover{color:var(--au-ink);border:none} .sidebar .nav-caret.open{transform:rotate(180deg);color:var(--au-a2);border:none} .nav-item.nav-child{margin-left:21px;border-left:1px solid var(--au-line);font-size:13px;font-weight:400;color:var(--au-mut);border-radius:0 8px 8px 0} .nav-item.nav-child>.nc-inner{padding:5px 10px 5px 8px} .nav-item.nav-child:hover{color:var(--au-ink)} .nav-item.nav-child.active{color:var(--au-ink)} .nav-divider{background:var(--au-line);opacity:1} /* rail foot: compact user block + Today + engine chip (mock .today/.eng) */ .sidebar .foot{padding:14px 2px 10px;color:var(--au-mut)} /* v3.2.6 Jon: foot was squished — real breathing room */ .sidebar .powered{margin-top:18px} /* v3.2.6: space above version block */ .sidebar .foot-links{margin-top:12px;padding-bottom:4px} /* v3.2.6: space between version history and Legal/Report row */ .sidebar .foot-user{padding:6px 8px;margin-bottom:2px;gap:4px} .sidebar .foot-user .avatar{width:34px;height:34px} .au-today{margin-top:10px;border-top:1px solid var(--au-line);padding-top:10px} .au-today-hd{display:flex;flex-direction:column;gap:6px;padding:0 10px 8px} .au-today-th{font-size:11px;letter-spacing:.12em;color:var(--au-dim2);font-family:var(--au-disp)} /* item 6: was 10.5px @ --au-dim */ .au-titem{display:flex;gap:9px;align-items:center;padding:6px 10px;border-radius:10px;font-size:12.5px;color:var(--au-mut);cursor:pointer} .au-titem:hover{background:rgba(124,108,255,.08);color:var(--au-ink)} .au-titem .t{font-family:var(--au-num);font-variant-numeric:tabular-nums;font-size:11.5px;letter-spacing:.04em;color:var(--au-a2);min-width:50px;flex:none} .au-titem .lb{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0} .au-titem.hot .t{color:var(--au-bad)} /* AURORA V3 POLISH item 9: relocated into .au-today-hd (out of the bottom-left, where it collided with the fixed + quick-create FAB, QA Q5). Gate-0 self-catch: an inline same-row layout truncated "Engines healthy · 2:14 PM" down to "E…" at the sidebar's 224px width — stacked on its own line instead, full text always readable. */ /* v3.2.6 (Jon): engines pill moved OFF the nav bar entirely → top bar, right of the ⌘K search */ .au-right .au-eng{width:auto;max-width:230px;margin:0 8px 0 0;flex:none} .au-eng{margin:0;width:100%;display:flex;gap:6px;align-items:center;padding:4px 8px;border-radius:999px; background:rgba(60,230,166,.06);border:1px solid rgba(60,230,166,.14);font-size:11px;color:var(--au-mut);cursor:pointer} /* item 6: was 10.5px */ .au-eng span:not(.led){overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0} .au-eng .led{width:7px;height:7px;border-radius:50%;background:var(--au-good);box-shadow:0 0 10px var(--au-good);flex:none} .au-eng.warn{background:rgba(255,194,75,.06);border-color:rgba(255,194,75,.18)} .au-eng.warn .led{background:var(--au-warn);box-shadow:0 0 10px var(--au-warn)} /* ── #20 NAV-HEALTH (2026-08-24): chip bad-state + the health panel ── */ .au-eng.bad{background:var(--au-badbg);border-color:rgba(255,93,143,.3)} .au-eng.bad .led{background:var(--au-bad);box-shadow:0 0 10px var(--au-bad)} #hlt-panel{position:absolute;top:40px;right:0;width:440px;max-height:76vh;overflow:auto;z-index:60; background:rgba(16,20,42,.96);backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px); border:1px solid var(--au-line2);border-radius:14px;box-shadow:var(--au-sh);font-size:12.5px;color:var(--au-ink);text-align:left} [data-theme="light"] #hlt-panel{background:rgba(255,255,255,.97)} #hlt-panel::before{content:"";position:absolute;inset:0 0 auto;height:1.5px;background:var(--au-grad);opacity:.7;border-radius:14px 14px 0 0} .hlt-hd{display:flex;align-items:center;gap:8px;padding:12px 14px;border-bottom:1px solid var(--au-line)} .hlt-hd b{font-family:var(--au-disp);font-size:13.5px} .hlt-hd .sub{margin-left:auto;font-size:10.5px;color:var(--au-mut);font-weight:400} .hlt-impact{margin:10px 14px;padding:9px 11px;border-radius:9px;background:var(--au-warnbg);border:1px solid rgba(255,194,75,.25);font-size:12px;line-height:1.55} .hlt-sec{padding:8px 14px 3px;font-size:10px;letter-spacing:.12em;color:var(--au-dim2);text-transform:uppercase;font-weight:700} .hlt-row{display:flex;align-items:center;gap:9px;padding:7px 14px;border-bottom:1px solid rgba(126,140,255,.06)} .hlt-row:last-of-type{border-bottom:none} .hlt-dot{width:8px;height:8px;border-radius:50%;flex:none} .hlt-dot.ok{background:var(--au-good);box-shadow:0 0 8px rgba(60,230,166,.55)} .hlt-dot.degraded{background:var(--au-warn);box-shadow:0 0 8px rgba(255,194,75,.6)} .hlt-dot.down{background:var(--au-bad);box-shadow:0 0 8px rgba(255,93,143,.6)} .hlt-dot.unknown{background:transparent;border:1.5px dashed var(--au-mut)} .hlt-name{font-weight:600;min-width:118px;font-size:12px} .hlt-state{flex:1;color:var(--au-mut);line-height:1.45;font-size:11.5px} .hlt-state b{color:var(--au-ink);font-weight:600} .hlt-last{font-size:10px;color:var(--au-dim2);white-space:nowrap} .hlt-act{font-size:11px;padding:3px 9px;border-radius:7px;border:1px solid var(--au-line2);background:transparent;color:var(--au-ink);cursor:pointer;white-space:nowrap;font-family:inherit} .hlt-foot{padding:10px 14px;font-size:10.5px;color:var(--au-mut);border-top:1px solid var(--au-line);line-height:1.55} @media (max-width:640px){#hlt-panel{width:min(440px,94vw)}} /* ── header — mock header: crumb · search pill · spacer · icon buttons · avatar ── */ .au-head{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;padding:9px 18px; border-bottom:1px solid var(--au-line); background:var(--au-glass);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px); position:sticky;top:0;z-index:41} .au-crumb{justify-self:start} .au-head .wf-summon{justify-self:center} .au-right{justify-self:end;display:flex;align-items:center;gap:10px} .au-crumb{font-family:var(--au-disp);font-size:14px;font-weight:600;white-space:nowrap;color:var(--au-ink)} .au-crumb small{color:var(--au-dim2);font-weight:400;font-size:11.5px} /* item 6: was UA-default ~11.2px @ --au-dim (~3.1:1, fails AA) — Jon's "the date at the top" */ .au-head .wf-summon{flex:1;max-width:680px;background:var(--au-glass2);border:1px solid var(--au-line); border-radius:999px;padding:7px 16px;margin:0;color:var(--au-dim2);display:flex;gap:10px;align-items:center; cursor:pointer;font-size:13px} .au-head .wf-summon:hover{border-color:var(--au-line2);box-shadow:0 0 22px rgba(124,108,255,.28);color:var(--au-dim2)} .au-head .wf-kbd{border:1px solid var(--au-line);background:none;border-radius:7px;padding:1px 7px; font-size:11px;color:var(--au-mut);margin-left:auto;font-family:var(--au-num);font-variant-numeric:tabular-nums} /* item 6: was 10.5px */ .au-iconbtn{width:32px;height:32px;border-radius:50%;border:1px solid var(--au-line);background:var(--au-glass2); color:var(--au-mut);display:grid;place-items:center;font-size:13px;cursor:pointer;position:relative;flex:none} .au-iconbtn:hover{color:var(--au-ink);border-color:var(--au-line2);box-shadow:0 0 14px rgba(124,108,255,.35)} .au-nb{position:absolute;top:-3px;right:-3px;min-width:14px;height:14px;border-radius:999px;background:var(--au-bad); color:#fff;font-size:8.5px;font-weight:800;display:grid;place-items:center;font-family:var(--au-num);font-variant-numeric:tabular-nums; box-shadow:0 0 10px rgba(255,93,143,.6);padding:0 2px} .au-avatar{width:32px;height:32px;border-radius:50%;background:var(--au-grad);padding:2px;cursor:pointer;flex:none} .au-avatar img{width:100%;height:100%;border-radius:50%;object-fit:cover;display:block} .au-avatar .avatar-init{display:grid;place-items:center;width:100%;height:100%;border-radius:50%; background:var(--bg2);font-size:11px;font-weight:800;color:var(--au-ink);letter-spacing:0} /* ── tab strip — mock .strip/.tab (K1 drag + all wf mechanics untouched) ── */ .wf-bar{background:var(--au-glass);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px); border-bottom:none;gap:5px} .wf-tab{background:var(--au-glass);border:1px solid var(--au-line);border-bottom:none; border-radius:11px 11px 0 0;padding:6px 13px;font-size:12.5px;color:var(--au-mut);top:0} .wf-tab:hover{color:var(--au-ink)} .wf-tab.on{background:var(--au-glass);color:var(--au-ink);font-weight:400;box-shadow:none} .wf-tab.on::after{content:"";position:absolute;left:8px;right:8px;top:0;height:2px;border-radius:2px; background:var(--au-grad);box-shadow:0 0 8px var(--au-a1)} .wf-dot.ok{background:var(--au-good)}.wf-dot.warn{background:var(--au-warn)}.wf-dot.alert{background:var(--au-bad)} .wf-more{border:none;color:var(--au-warn);font-size:12px;padding:6px 10px;top:0} .wf-more b{color:var(--au-warn)} .wf-overflow-panel,.wf-peek{background:var(--au-glass2);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-color:var(--au-line2)} .wf-palette{background:var(--au-glass2);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-color:var(--au-line2)} /* ── canvas typography + density (scope 4) ── */ h1{font-family:var(--au-disp);font-size:22px;font-weight:700;letter-spacing:-.02em} .au-trust{color:var(--au-dim2);font-size:12.5px;margin:2px 0 14px;min-height:19px} /* item 6: was --au-dim */ .au-trust b{color:var(--au-good);font-weight:600} #page-dashboard #dash-widgets{gap:12px} #page-dashboard .grid4{gap:12px} #page-dashboard .card{padding:16px} /* ── KevinAI ✦ FAB → mock .korb (colors everywhere; geometry desktop-only so the mobile bottom-bar offsets in style.css keep winning ≤820px) ── */ #kev-bubble{color:#fff;background:var(--au-grad);box-shadow:0 10px 34px rgba(124,108,255,.5)} /* ── desktop layout geometry (mock: 224px rail, edge-to-edge dense main) ── */ @media(min-width:821px){ #app{grid-template-columns:224px 1fr} .main{padding:0 18px 90px;max-width:none} .au-head{margin:0 -18px} .wf-bar{margin:0 -18px 16px;padding:8px 18px 0;top:50px} #kev-bubble{width:54px;height:54px;font-size:20px;right:22px;bottom:22px} } /* mobile: same skin, mobile-shell geometry (drawer + bottom bar untouched) */ @media(max-width:820px){ .au-head{margin:-16px -14px 12px} .wf-bar{margin:0 -14px 16px;padding:8px 14px 0} } /* ── motion — every frame transition/animation reduced-motion-guarded (§2) ── */ @media (prefers-reduced-motion: no-preference){ .nav-item{transition:.15s} .sidebar .nav-caret{transition:transform .3s,color .15s} .au-titem{transition:.15s} .au-eng .led{animation:auPulse 2.4s infinite} @keyframes auPulse{50%{opacity:.35}} .au-head .wf-summon{transition:.2s} .au-iconbtn{transition:.2s} .au-avatar{transition:transform .2s} .au-avatar:hover{transform:scale(1.08)} .wf-tab{transition:.15s} #kev-bubble{animation:auBreathe 3.2s ease-in-out infinite;transition:transform .25s} #kev-bubble:hover{transform:scale(1.1) rotate(8deg)} @keyframes auBreathe{0%,100%{box-shadow:0 10px 34px rgba(124,108,255,.5),0 0 0 0 rgba(124,108,255,.35)} 50%{box-shadow:0 10px 34px rgba(124,108,255,.5),0 0 0 12px rgba(124,108,255,0)}} } /* ── pre-existing floaters vs the new header ── help-phase1.js injects a fixed "?" fab at top:14/right:14 — that spot is now the header avatar. Slot it into the header row as a matching glass icon-button left of the bell (body #help-fab = higher specificity than the chunk's own injected #help-fab rules, which land after this sheet in source order). Panel/behavior untouched. */ body #help-fab{top:9px;right:152px;width:32px;height:32px;font-size:14px; background:var(--au-glass2);color:var(--au-mut);border:1px solid var(--au-line);box-shadow:none} body #help-fab:hover{filter:none;color:var(--au-ink);border-color:var(--au-line2);box-shadow:0 0 14px rgba(124,108,255,.35)} /* ══════════════════════════════════════════════════════════════════════════ AURORA V3 — THE CUTOVER (BRIEF-AURORA-V3-CUTOVER-2026-08-09). Scope 1: the mock-1C dashboard is THE dashboard (DASH_DEFAULT in app.js); the duo grammar below gives the Next-7-days column the mock's 1.25fr lead. Scope 4: light-mode redesign — the mock's own light tokens were right for the MOCK's sparse canvas but washed out under real app content density; these overrides push contrast where it was lost (borders, shadows, muted ink, accent presence) while keeping the exact same family. L8 holds: light is a designed twin. All values chosen against rendered screenshots (results doc). ══════════════════════════════════════════════════════════════════════════ */ /* ── scope 1: the duo grammar — left column leads (mock .duo 1.25fr/1fr). Half-widget pairs share a row via the existing smart-packing; ≤1100px stacks. ── */ @media(min-width:1101px){ #page-dashboard #dash-widgets{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr)} } /* ── scope 4: light tokens, strengthened (same family, real presence) ── */ [data-theme="light"]{ --au-glass:rgba(255,255,255,.82); /* was .74 — more body against porcelain */ --au-glass2:#ffffff; --au-line:rgba(78,90,200,.22); /* was .15 — borders you can actually see */ --au-line2:rgba(78,90,200,.45); --au-mut:#4d5678; /* was #5a6285 — muted ink passes contrast at 12.5px */ --au-dim:#8189ad; --au-dim2:#63699a; /* item 6 (2026-08-10): light-theme chrome-caption sibling to --au-dim2 above — darker than --au-dim for the same "not just smaller, also brighter/darker-enough" floor */ --au-sh:0 14px 34px rgba(38,44,94,.14),0 2px 6px rgba(38,44,94,.08); /* layered, confident */ } /* aurora field keeps a real accent presence on porcelain (was .33 — invisible under glass) */ [data-theme="light"] .dash-aurora i{opacity:.42} /* dashboard cards: crisp edge + the gradient hairline reads darker on white */ [data-theme="light"] #page-dashboard .card{border-color:rgba(78,90,200,.26)} [data-theme="light"] #page-dashboard .card::before{opacity:.85} /* header/sidebar glass sits ON the canvas instead of dissolving into it */ [data-theme="light"] .au-head,[data-theme="light"] .sidebar{box-shadow:0 1px 0 rgba(78,90,200,.10)} /* sheen sweep: white-on-white is invisible — use an indigo wash in light */ @media (prefers-reduced-motion: no-preference){ [data-theme="light"] #page-dashboard .card::after{background:linear-gradient(90deg,transparent,rgba(90,73,240,.05),transparent)} } /* ══════════════════════════════════════════════════════════════════════════ V3.2.1 QA POLISH item 8 (2026-08-10) — LIGHT MODE OVERHAUL, own commit. Jon: "Light mode… C-. Too much blending, needs more borders/colors/contrast between sections, cards." Two prior passes (scope 4 above, style.css's own AURORA V3 CUTOVER light redesign) already pushed opacity/line-strength once each and it still read as C- — this pass goes further on the SAME five levers the QB ruling named, rather than opening new ones: near-opaque cards, ~doubled border presence again, a cooler/deeper canvas tint so the card edge reads at arm's length, less blur (blur fights contrast on a translucent surface), and saturated pill/badge borders. Self-check before/after: dashboard + chat, thumbnail-size screenshot, every card boundary should be findable without zooming — screenshots in the results doc. ══════════════════════════════════════════════════════════════════════════ */ [data-theme="light"]{ --au-glass:rgba(255,255,255,.94); /* was .82 — near-opaque per the ruling's explicit floor */ --au-line:rgba(66,58,180,.42); /* was .22 — ~double again, deeper indigo not just more alpha */ --au-line2:rgba(66,58,180,.68); /* was .45 */ --au-sh:0 16px 36px rgba(38,44,94,.20),0 3px 8px rgba(38,44,94,.12); /* soft but present — was .14/.08 */ } /* cooler, deeper canvas — the previous f7f9ff→e3e8f8 gradient sat too close to the ~.82 glass for the edge to read at a glance; darkened + more saturated indigo at the low end. */ [data-theme="light"] body{background:linear-gradient(180deg,#eef1fc 0%,#dee4f7 45%,#cfd7f0 100%) fixed} /* backdrop blur fights contrast once the glass is this opaque — cut it well down, not to zero (some depth-of-field cue stays), on every au-glass surface in the light theme. */ [data-theme="light"] .au-head,[data-theme="light"] .sidebar,[data-theme="light"] #page-dashboard .card, [data-theme="light"] .wf-bar,[data-theme="light"] .wf-overflow-panel,[data-theme="light"] .wf-peek, [data-theme="light"] .wf-palette{backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)} [data-theme="light"] #page-dashboard .card{border-color:var(--au-line2);box-shadow:var(--au-sh)} [data-theme="light"] #page-dashboard .card h3,[data-theme="light"] #page-dashboard h1{color:var(--au-ink)} /* full-ink section headers, never --au-mut/--au-dim */ /* chips/badges: a flat tint alone under-separates on near-white — give every status pill a saturated border in its own hue so it reads as a chip, not a smudge. */ [data-theme="light"] .pill{border:1px solid currentColor} [data-theme="light"] .navbadge{box-shadow:0 0 0 1px rgba(255,255,255,.5) inset} /* ══════════════════════════════════════════════════════════════════════════ AURORA POLISH (BRIEF-AURORA-POLISH-2026-08-10, Jon's 08-09 close review). ══════════════════════════════════════════════════════════════════════════ */ /* ── ITEM 7: sidebar collapse — mock 1C rail restored (Jon overrules the K2 hold: "I don't care about Kevin's feedback — I like it"). body.rail mirrors the mock's own convention exactly (same class, same toggle mechanism) so the mechanics are identical, not just the look. Desktop-only — mobile keeps its drawer shell untouched. ── */ .sb-handle{position:absolute;top:14px;right:-11px;width:22px;height:22px;border-radius:50%; background:var(--au-glass2);border:1px solid var(--au-line2);color:var(--au-mut); display:grid;place-items:center;font-size:10px;cursor:pointer;z-index:6; backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)} .sb-handle:hover{color:var(--au-ink)} body.rail .sb-handle{transform:rotate(180deg)} @media(max-width:820px){.sb-handle{display:none}} /* mobile drawer has its own affordance */ @media(min-width:821px){ body.rail #app{grid-template-columns:62px 1fr} } body.rail .au-logo, body.rail .nav-label, body.rail .navbadge, body.rail .nav-caret, body.rail .nav-child, body.rail .au-today, body.rail .foot-links, body.rail .powered{display:none} /* B4 SIDEBAR COLLAPSED-RAIL DEFECT (Jon screenshot 08-10, W5 blitz): the four footer .nudge pills (fathom-nudge/push-nudge/avatar-nudge/fathom-oauth-nudge -- index.html ~150-156) had no rail-mode rule at all, so a full-width text pill ("Add your photo" etc.) rendered inside the 62px rail and visually overlapped it. Same treatment as every other full-label footer element above (.foot-links/.powered/.au-today) -- hidden on rail, unchanged on the expanded sidebar. [U] resolved [M-code]: the CONTRACTOR rail's separate "no icons at all" appearance is NOT this same bug -- it's role-correct emptiness. app.js's contractor boot gate hides every ".sidebar .nav-item" except one whose data-page is "chat" (v2.75 ALLHANDS-ROLE-SLICE), but Chat left the sidebar entirely in v3.4.3/v3.5.0 (index.html comment: "Dashboard + Chat left the sidebar -- they are permanently pinned tabs"; grep-confirmed zero data-page="chat" nodes remain in the sidebar). The "except chat" carve-out is now vacuous, but its NET EFFECT -- hide every sidebar nav-item for a contractor -- is exactly correct: contractors have no sidebar-appropriate module (Clients/Documents/Tax/Accounting/Bookings/Sales&Marketing/ Insights/Settings are all genuinely off-limits, and Chat/Dashboard live in the pinned-tab strip, not the sidebar). Left as-is -- not a defect, out of scope to "fix" dead-but-harmless logic under a defect-fix-only brief. */ body.rail .nudge{display:none!important} /* BLITZ-D D2: inline style.display on an ACTIVE nudge beat the class rule — !important settles it (Jon 08-10: pills disappear on collapse, reappear on expand) */ /* v3.2.6: au-eng lives in the top bar now — rail rule retired */ body.rail .brand{padding:2px 0 14px;text-align:center} body.rail .nav-item{justify-content:center;padding-left:0;padding-right:0;gap:0} body.rail .nav-item:hover{padding-left:0} body.rail .au-eng{display:none} /* the rail has no room for the Today header row that carries it */ @media (prefers-reduced-motion: no-preference){ .sb-handle{transition:transform .3s,box-shadow .2s} .sb-handle:hover{box-shadow:0 0 14px rgba(124,108,255,.5)} @media(min-width:821px){ #app{transition:grid-template-columns .38s cubic-bezier(.4,0,.2,1)} } } /* ── QA Q7: badge-gradient AA contrast in LIGHT theme. --au-a2 (teal) at #0993c9 measures ~3.5:1 for white text at 9.5px bold — below the 4.5:1 AA floor for text that size. Dark theme is unaffected (not in Q7's scope — flagged separately in the results doc). Badge-only override (not a --au-a2 retint) so every OTHER teal accent usage is untouched; extra specificity + !important beats the existing .sidebar .navbadge{...!important} rule. ── */ /* v3.2.5: light .sidebar .navbadge override retired — rail is dark in both themes now */ /* ── v3.2.3 QB (Jon item 9): the big orange quick-create FAB sat ON TOP of the "Powered by taxapp" lockup on desktop. Desktop quick-create now lives in the top bar (#au-new → clicks the hidden #mfab, same sheet/logic untouched); the FAB itself stays mobile-only. ── */ @media (min-width:821px){ #mfab{display:none!important} #mfab-sheet{left:auto!important;right:14px!important;bottom:auto!important;top:54px!important} } /* (light navbadge override retired at v3.2.5 — dark rail both themes) */ /* ══════════════════════════════════════════════════════════════════════════ AURORA CHAT — BRIEF-CHAT-AURORA-BUILD-2026-08-11. SOURCE = web/preview-7kq2- chat-mock.html (frozen, 689 lines @ 2d22f1ca). Reskins the EXISTING chat DOM (renderChannelList/renderChatHead/chatMsgHtml/renderHome all still emit the same class names — this section restyles them to the mock's glass/gradient language using the app-wide --au-* tokens, per SOURCE's "keep Aurora tokens, don't fork the palette"). New markup (icontabs row, thread peek panel, status menu) is additive — see app.js/index.html diffs in the same PR. Both themes designed at the same attention (L8) — [data-theme="light"] overrides ride the existing --au-* light values wherever possible; only contrast-critical spots (badges) get explicit light rules. ══════════════ */ /* ── rail head (replaces the old H1 "Chat" + Create-new topbar) ── */ .ch-railhead{display:flex;align-items:center;gap:10px;margin-bottom:8px} .ch-railtitle{font-weight:700;font-size:16px;display:flex;align-items:center;gap:7px;flex:1} .ch-live{width:7px;height:7px;border-radius:50%;background:var(--au-good);box-shadow:0 0 8px var(--au-good)} @media(prefers-reduced-motion:no-preference){.ch-live{animation:chPulse 2.4s infinite}} @keyframes chPulse{50%{opacity:.35}} .ch-headbtns{display:flex;gap:6px} .ch-iconbtn,.ch-newbtn{width:30px;height:30px;border-radius:9px;border:1px solid var(--au-line);background:var(--au-glass2); color:var(--au-mut);display:grid;place-items:center;cursor:pointer;transition:.15s;flex:none} .ch-iconbtn:hover,.ch-newbtn:hover{color:var(--au-ink);border-color:var(--au-line2);box-shadow:0 0 14px rgba(124,108,255,.3)} .ch-newbtn{color:var(--au-a1);border-color:var(--au-line2)} .ch-iconbtn svg,.ch-newbtn svg{width:14px;height:14px} /* ── the old full-width search-wrap, restyled as a slim glass field (kept — this is the 4-year full-history search, a real feature the mock's own compact "Filter…" box doesn't model; see RESULTS for the documented delta) ── */ .ch-searchwrap{background:var(--au-glass);border:1px solid var(--au-line);border-radius:11px;margin-bottom:10px} .ch-searchwrap .search-wrap-input{background:transparent;border:none;color:var(--au-ink)} .ch-searchwrap .search-wrap-ico{color:var(--au-mut)} /* ── rail / chat-side ── */ #page-chat .chat-side{background:var(--au-glass2);border:1px solid var(--au-line);border-radius:16px; backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);padding:10px} .ch-filterrow{display:flex;align-items:center;gap:7px;background:var(--au-glass);border:1px solid var(--au-line); border-radius:9px;padding:6px 10px;margin-bottom:8px} .ch-filtico{width:12px;height:12px;flex:none;color:var(--au-dim)} #page-chat #ch-filter{background:transparent;border:none;padding:0;margin:0;font-size:12.5px;color:var(--au-ink)} #page-chat #ch-filter::placeholder{color:var(--au-dim)} /* four icon tabs (Notes/Home/Mentions/Starred) — SOURCE: "four icon tabs replacing Notes/Home/Mentions/Starred rows". Markup wraps the four existing rows in .icontabs; each row keeps its onclick/HOME_MODE-driven .on class from JS. */ .icontabs{display:flex;gap:5px;margin-bottom:8px} .icontabs .chat-ch{flex:1;height:32px;border-radius:9px;display:grid;place-items:center;padding:0;margin:0; border:1px solid var(--au-line);background:var(--au-glass);position:relative} .icontabs .chat-ch:hover{border-color:var(--au-line2);box-shadow:0 0 12px rgba(124,108,255,.22);background:var(--au-glass)} .icontabs .chat-ch.on{border-color:var(--au-line2);background:rgba(124,108,255,.14);box-shadow:none} .icontabs .chat-ch .chlbl{display:none} /* label text hidden — icon + title tooltip only, per L5 one-icon-set */ .icontabs .chat-ch .chico{width:14px;height:14px;color:var(--au-mut)} .icontabs .chat-ch.on .chico{color:var(--au-ink)} .icontabs .chat-ch .acount{position:absolute;top:-4px;right:-4px;background:var(--au-bad);color:#fff;font-size:8.5px; font-weight:800;border-radius:999px;padding:1px 4px;min-width:13px;text-align:center;box-shadow:0 0 8px rgba(255,93,143,.6)} /* recent-activity row + section groups — glass pill sections instead of solid tint blocks */ #page-chat .chgrp{margin-bottom:2px} #page-chat .chsec{background:var(--au-glass);border:1px solid var(--au-line);color:var(--au-dim)!important} #page-chat .chat-ch{border-radius:9px;color:var(--au-mut)} #page-chat .chat-ch:hover{background:rgba(124,108,255,.08);color:var(--au-ink)} #page-chat .chat-ch.on{background:linear-gradient(90deg,rgba(124,108,255,.22),rgba(63,212,255,.07)); box-shadow:none;color:var(--au-ink)} #page-chat .chat-ch.unread .chlbl{color:var(--au-ink)} #page-chat .chat-ch .udot{background:var(--au-a2);box-shadow:0 0 7px var(--au-a2)} /* dark-theme badge contrast rider: acount/badge glyphs were low-contrast against the glass rail in dark mode — solid bg + white text + glow reads at-a-glance now */ #page-chat .acount{background:var(--au-bad);color:#fff;font-weight:800;box-shadow:0 0 8px rgba(255,93,143,.55)} [data-theme="light"] #page-chat .acount{box-shadow:none} /* ── main column header — reskinned #chat-head (renderChatHead's own markup unchanged: .chh-l/.chh-title/.chh-actions) ── */ #page-chat #chat-head{display:flex;align-items:center;gap:10px;padding:11px 16px;border-bottom:1px solid var(--au-line); background:var(--au-glass);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)} #page-chat .chh-title{font-weight:700;font-size:15px;color:var(--au-ink)} #page-chat .chh-desc{font-size:11.5px;color:var(--au-dim);display:block;margin-top:1px} #page-chat .chh-actions{margin-left:auto;display:flex;gap:6px} #page-chat .chh-actions .btn{width:auto;min-width:30px;padding:0 9px;height:30px;border-radius:9px;border:1px solid var(--au-line); /* v3.3.1 QB catch: fixed 30px squares garbled Home's TEXT buttons (Unread × ＋New chat collision) — auto width fits both text and icon-only */ background:var(--au-glass2);color:var(--au-mut);padding:0;display:grid;place-items:center;font-size:13px} #page-chat .chh-actions .btn:hover{color:var(--au-ink);border-color:var(--au-line2);box-shadow:0 0 14px rgba(124,108,255,.3)} /* ── messages ── */ #page-chat #tc-msgs{padding:14px 20px 8px} #page-chat .cmsg{border-radius:11px} #page-chat .cmsg:hover{background:rgba(255,255,255,.03)} [data-theme="light"] #page-chat .cmsg:hover{background:rgba(20,30,70,.025)} #page-chat .cmsg .who{font-family:inherit;font-weight:700} #page-chat .cmsg .body a{color:var(--au-a2)} /* actionbar (mock's floating hover-pill) = the existing .ract, repositioned/glassed */ #page-chat .ract{top:-14px;right:6px;background:var(--au-glass2);border:1px solid var(--au-line2); border-radius:11px;box-shadow:var(--au-sh);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)} #page-chat .ract button:hover{background:rgba(124,108,255,.16)} /* thread reply count pill (mirrors mock's .threadlink — "N replies · last Xm ago") */ .ch-threadlink{display:inline-flex;align-items:center;gap:6px;margin-top:5px;font-size:12px;color:var(--au-a2); cursor:pointer;background:rgba(63,212,255,.07);border:1px solid rgba(63,212,255,.2);border-radius:9px; padding:5px 10px;transition:.15s} .ch-threadlink:hover{background:rgba(63,212,255,.14);box-shadow:0 0 12px rgba(63,212,255,.25)} /* ── thread peek panel — overlays the right edge of .chat-main (SOURCE's peek is a 3rd grid column; here it's an absolute drawer over the message pane so the existing 2-col grid/resizer logic never has to change) ── */ .chat-peek{position:absolute;top:0;right:0;bottom:0;width:340px;border-left:1px solid var(--au-line); background:var(--au-glass2);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px); display:flex;flex-direction:column;z-index:6;transform:translateX(0)} .chat-peek.hidden{display:none} @media(prefers-reduced-motion:no-preference){.chat-peek{transition:transform .25s cubic-bezier(.4,0,.2,1)}} /* CHAT-WAVE2 B (ruling 6): pinned-messages strip — collapsed count chip at the top of the message pane, expands to a short list, click jumps to the message (existing jumpToMsg). */ #chat-pinned.hidden{display:none} /* CHAT-WAVE2 A (ruling 5) */ .chat-typing.hidden{display:none} .chat-typing{padding:4px 16px;font-size:11.5px;font-style:italic;color:var(--au-mut)} /* CHAT-WAVE2 C (ruling 7) */ .unfurl-slot:empty{display:none} .unfurl-card{display:flex;gap:10px;margin-top:6px;max-width:420px;border:1px solid var(--au-line);border-radius:10px; background:var(--au-glass2);overflow:hidden;text-decoration:none;color:inherit} .unfurl-card:hover{border-color:var(--au-line2)} .unfurl-card .unfurl-img{width:88px;height:88px;object-fit:cover;flex:none;background:var(--au-glass)} .unfurl-body{display:flex;flex-direction:column;gap:2px;padding:8px 10px;min-width:0;overflow:hidden} .unfurl-site{font-size:10.5px;text-transform:uppercase;letter-spacing:.03em;color:var(--au-mut)} .unfurl-title{font-size:12.5px;color:var(--au-ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .unfurl-desc{font-size:11.5px;color:var(--au-mut);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} #chat-pinned{border-bottom:1px solid var(--au-line);background:var(--au-glass2)} .pinned-chip{display:flex;align-items:center;gap:6px;padding:7px 14px;font-size:12px;color:var(--au-mut);cursor:pointer;user-select:none} .pinned-chip:hover{color:var(--au-ink)} .pinned-chip .car{margin-left:2px;opacity:.7} .pinned-list{max-height:160px;overflow-y:auto;padding:0 14px 8px} .pinned-row{display:flex;gap:6px;align-items:baseline;padding:5px 0;font-size:12.5px;cursor:pointer;border-top:1px solid var(--au-line);color:var(--au-mut)} .pinned-row:first-child{border-top:none} .pinned-row:hover{color:var(--au-ink)} .pinned-row b{flex:none;color:var(--au-ink)} .pinned-row span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .peek-head{display:flex;align-items:center;gap:9px;padding:12px 14px;border-bottom:1px solid var(--au-line);flex:none} .peek-head .pt{font-weight:700;font-size:13px;color:var(--au-ink)} .peek-head .psub{font-size:10.5px;color:var(--au-dim);display:block;margin-top:1px} .peek-close{width:26px;height:26px;border-radius:8px;border:1px solid var(--au-line);background:var(--au-glass); color:var(--au-mut);display:grid;place-items:center;cursor:pointer;margin-left:auto;flex:none} .peek-close:hover{color:var(--au-ink);border-color:var(--au-line2)} .peek-root{padding:10px 14px;border-bottom:1px solid var(--au-line);background:rgba(124,108,255,.04);flex:none} .peek-body{flex:1;overflow-y:auto;padding:8px 14px} .peek-composer{padding:10px 14px 14px;flex:none;border-top:1px solid var(--au-line)} .peek-composer textarea{width:100%;border:1px solid var(--au-line2);border-radius:13px;background:var(--au-glass); color:var(--au-ink);font:13px/1.5 inherit;padding:9px 12px;resize:none;outline:none;min-height:38px;max-height:120px} @media(max-width:800px){.chat-peek{width:100%}} /* ── status menu (header avatar → Active/Busy/OOO + View profile). Un-orphans setStatus()/toggleStatusMenu(), retired when #my-status's old sidebar home (AURORA V3 POLISH item 3) was removed — see BRIEF-AURORA-POLISH-RESULTS item 2 ── */ .au-avatar-wrap{position:relative} /* v3.6.9 PART F: this rule already right-anchors (right:0) but never formally cancelled style.css:445's legacy `left:0` (pre-AURORA sidebar-block anchor) — the two stylesheets were left to fight it out via CSS's over-constrained left/width/right resolution, which is correct per spec but fragile across engines. left:auto makes this rule authoritative on its own, and max-width keeps the popover inside the viewport at any width (the v1.98.1 lesson: a rendered rect measurement is the proof, not scrollWidth). */ #status-menu{position:absolute;top:calc(100% + 8px);right:0;left:auto;min-width:190px;max-width:min(320px, calc(100vw - 24px));background:var(--au-glass2); border:1px solid var(--au-line2);border-radius:13px;box-shadow:var(--au-sh);backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);padding:6px;z-index:50} #status-menu #my-status{display:flex;align-items:center;gap:8px;padding:8px 10px;font-size:12.5px; font-weight:700;color:var(--au-ink);border-bottom:1px solid var(--au-line);margin-bottom:4px} .status-opt{display:flex;align-items:center;gap:8px;width:100%;text-align:left;padding:7px 10px;border-radius:8px; border:none;background:transparent;color:var(--au-mut);font-size:12.5px;cursor:pointer} .status-opt:hover{background:rgba(124,108,255,.1);color:var(--au-ink)} .status-opt .pdot{flex:none} /* ── quick-create popover (BLITZ-E, 2026-08-21): #au-new's own menu, replacing the mfab-sheet delegation Jon flagged as "old UI style" — same glass/#status-menu grammar as the avatar's status menu, just anchored under #au-new instead of #au-av. Entries are role-gated at boot (app.js, the IS_ADMIN||staff reveal block) using the SAME condition already governing the mfab-sheet's client row and RLS-confirmed [M] for bookings/action_items (owner/superadmin/ staff only) — contractor/client naturally see "New message" only, no new gate invented. */ .au-new-wrap{position:relative} #new-menu{position:absolute;top:calc(100% + 8px);left:0;right:auto;min-width:190px;max-width:min(320px, calc(100vw - 24px)); background:var(--card);border:1px solid var(--au-line2);border-radius:13px;box-shadow:var(--au-sh); padding:6px;z-index:50;display:flex;flex-direction:column;gap:3px} /* Kevin 08-10: menu read as translucent (glass bg let the page bleed through) and cramped — opaque --card background + a small row gap; icons dropped (text-only reads cleaner at this size). */ /* ── composer chrome ── */ #page-chat .chat-compose{background:var(--au-glass);border:1px solid var(--au-line2);border-radius:16px; box-shadow:var(--au-sh);border-top:none;margin:6px 20px 10px;padding:8px 10px} #page-chat .chat-compose:focus-within{border-color:var(--au-a1);box-shadow:0 0 0 3px rgba(124,108,255,.14),var(--au-sh)} #page-chat #chat-input{background:transparent;border:none;color:var(--au-ink)} #page-chat #chat-input::placeholder{color:var(--au-dim)} #page-chat .chat-toolbar{padding:2px 24px 12px;border-top:none} /* Home command-of-the-day section headers ("Needs your reply " / "Everything else") */ #page-chat .inbox-h{font-size:11.5px;font-weight:700;color:var(--au-dim);letter-spacing:.05em; text-transform:uppercase;margin:14px 4px 8px;display:flex;align-items:center;gap:8px} #page-chat .inbox-h .cnt{font-size:10px;color:var(--au-a2);font-weight:800} /* ══════════════════════════════════════════════════════════════════════════════ BRIEF-CHAT-FIDELITY-2026-08-11 — F1-F12 mock-DOM-grammar pass. Everything above this line is #134's CSS-reskin of the OLD dom (kept where the F-table didn't ask to change it, e.g. the rail-head/search/icontabs/peek-panel/status-menu blocks). Everything below replaces DOM structure, not just color, per Jon's verdict on #134: "it just the old chat with a new background." ══════════════ */ /* ── F1/F2: burst grouping + day dividers ── */ #page-chat .daydiv{display:flex;align-items:center;gap:10px;margin:18px 0 12px} #page-chat .daydiv .line{flex:1;height:1px;background:linear-gradient(90deg,transparent,var(--au-line2),transparent)} #page-chat .daydiv .chip{font-size:10.5px;font-weight:600;color:var(--au-dim);background:var(--au-glass2); border:1px solid var(--au-line);border-radius:999px;padding:3px 12px;white-space:nowrap;letter-spacing:.04em;flex:none} #page-chat .burst{margin-bottom:14px;position:relative} #page-chat .burst .b-head{display:flex;align-items:baseline;gap:9px;margin-bottom:3px} #page-chat .burst .b-avatar{width:30px;height:30px;border-radius:50%;background:var(--au-grad);display:grid;place-items:center; font-size:10.5px;font-weight:800;color:#fff;flex:none;overflow:hidden;cursor:default} #page-chat .burst .b-avatar.dmable{cursor:pointer} #page-chat .burst .b-avatar img{width:100%;height:100%;object-fit:cover} #page-chat .burst .b-name{font-weight:700;font-size:13px;color:var(--au-ink);cursor:default} #page-chat .burst .b-name.dmable{cursor:pointer} #page-chat .burst .b-time{font-family:inherit;font-size:10.5px;color:var(--au-dim)} #page-chat .burst .b-lines{padding-left:39px;display:flex;flex-direction:column;gap:2px} #page-chat .msgline{position:relative;padding:4px 10px 4px 0;border-radius:9px;font-size:13.5px;line-height:1.5; max-width:100%;transition:background .12s} #page-chat .msgline:hover{background:rgba(255,255,255,.03);z-index:7}/* v3.6.15 Part H: hovered line (and its bar) paints above the next message */ [data-theme="light"] #page-chat .msgline:hover{background:rgba(20,30,70,.025)} #page-chat .msgline .txt{white-space:pre-wrap;word-break:break-word} /* v3.6.4: the pre-Aurora .body carried pre-wrap (style.css:243); .txt never did — newlines in saved messages collapsed on display */ #page-chat .msgline .txt a{color:var(--au-a2)} #page-chat .msgline .txt.struck{text-decoration:line-through;opacity:.65} #page-chat .msgline .mtime-inline{font-size:10px;color:var(--au-dim);opacity:0;margin-right:7px;width:0;display:inline-block;vertical-align:top} #page-chat .msgline:hover .mtime-inline{opacity:1;width:auto} #page-chat .msgline.flash{animation:msglineFlash 2.2s ease} @keyframes msglineFlash{0%,25%{background:rgba(124,108,255,.16)}100%{background:transparent}} #page-chat .cquote{font-size:12px;color:var(--au-dim);border-left:2px solid var(--au-line2);padding-left:8px;margin-bottom:3px;cursor:pointer} #page-chat .cquote:hover{color:var(--au-a2)} #page-chat .attach.img{margin-top:6px;max-width:340px} #page-chat .chat-img{max-width:220px;max-height:160px;border-radius:11px;cursor:pointer}/* v3.6.16 (Jon 08-22 "WAY too big — smaller than it USED to be"): the live cap. NOTE: style.css's .cmsg rule is DEAD post-Aurora (msgline replaced .cmsg) — v3.6.15's Part L edited that dead rule, a no-op, owned in RESULTS */ #page-chat .chat-filelink{display:inline-flex;align-items:center;gap:6px;background:var(--au-glass);border:1px solid var(--au-line); border-radius:11px;padding:8px 12px;margin-top:6px;color:var(--au-ink);font-size:12.5px;text-decoration:none;max-width:340px} #page-chat .chat-filelink:hover{border-color:var(--au-line2)} /* ── F3: hover action bar (replaces the old .ract) ── */ #page-chat .actionbar{position:absolute;top:-32px;right:6px;left:auto;margin:0;width:max-content;z-index:6;/* v3.6.32 OPTION-F "last-line lock" (Jon: "I am partial to E, but we should ship F. Approved." — after E's field results + the industry research in EMOJI-BAR-PLACEMENT-RESEARCH-2026-08-12.md): the bar is POSITIONED BY JS per hover (app.js __abF block) onto the hovered message's own last content line — after the text when it fits (median msg = 65 chars), else right-aligned on that same line over its own already-read tail. It never leaves the line's band, so it structurally cannot touch a header, the next message, or the previous one, and the bottom message needs no special case. These CSS coords are only the no-JS fail-open (the v3.6.27 top-right). 6th and FINAL placement — do not move without the mock process. */display:flex;gap:2px;background:var(--au-glass2); border:1px solid var(--au-line2);border-radius:11px;padding:2px;box-shadow:var(--au-sh);opacity:0; transform:translateY(-3px) scale(.96);pointer-events:none;transition:opacity .14s,transform .14s;z-index:8; backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)} #page-chat .msgline:hover .actionbar{ opacity:1;transform:translateY(0) scale(1);pointer-events:auto} /* v3.3.1 Jon: burst:hover clause removed — it double-showed the first line's bar alongside the hovered line's */ #page-chat .actionbar.open{opacity:1;transform:none;pointer-events:auto} /* react-picker expanded, stays visible */ #page-chat .actionbar>button{width:26px;height:26px;border-radius:8px;border:none;background:transparent;color:var(--au-mut); cursor:pointer;display:grid;place-items:center;transition:.13s;flex:none} #page-chat .actionbar>button:hover{background:rgba(124,108,255,.16);color:var(--au-ink)} #page-chat .actionbar>button svg{width:14px;height:14px} #page-chat .actionbar>button.warn:hover{background:var(--au-warnbg);color:var(--au-warn)} /* CH-5 dark-mode contrast fix (Kevin's report; BRIEF-CHAT-F 2026-08-21). Measured [M] via sRGB relative-luminance compositing: the actionbar's backdrop-blur glass sits over VARYING message content (screenshots, bright images), not a flat page background. At the base --au-glass2 alpha (.5) a bright/white backdrop composites to ~(142,145,160) — au-mut (icon default) drops to ~1.27:1 and the delete-armed --err text to ~1.06:1 against it, both far under WCAG AA's 4.5:1 and effectively invisible over a light screenshot. Scoping the fix to THIS selector (not the shared --au-glass2 token, which many other glass surfaces use) raises only the actionbar's own opacity so backdrop bleed-through can no longer pull it below the floor — re-measured [M] against the same worst-case white backdrop: au-mut ~5.7:1, --err (armed delete) ~4.8:1. Light theme's glass2 is already opaque enough (.92) and passes its own worst-case dark-behind check (~5.0:1) — no change needed there, so this is scoped to dark only via the :not([data-theme="light"]) guard (same convention as feedback-fixes.js's dark-scope prefix). */ :root:not([data-theme="light"]) #page-chat .actionbar{background:rgba(28,35,64,.97)} #page-chat .actionbar .ab-more{display:none;align-items:center} #page-chat .actionbar.open .ab-more{display:flex} /* v3.6.9 PART I: quick row grows 4→8 (js: EMOJIS.slice), the white/opaque default