/* Atlas Money: Home Buyer Roadmap (owner's Home-Buyer-Roadmap-3D mock, 2026-10-19).
   Markup + behavior: public/roadmap.js into #rmPage (body level, fixed full screen).
   Opens from the Housing landing's Buying card (body.rmopen); its step 1 button
   "See what I can afford" opens the affordability flow. Classes are rm- prefixed
   (the mock's .card/.chip/.pill/.nav names collide with the app's).
   Colors: atlas-colors tokens; the mock's bridge plank lines #C9B77A -> ink at .18,
   its horizon hills #C6EDB5 -> brand green at .28 over white. */

#rmPage{display:none;position:fixed;inset:0;z-index:40;background:#FFFFFF;overflow:hidden;font-family:"Inter Tight",system-ui,sans-serif;color:#1C1C1E;-webkit-font-smoothing:antialiased;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent}
body.rmopen[data-tab="home"] #rmPage{display:block}
body.rmopen[data-tab="home"]{overflow:hidden;overscroll-behavior:none}
body.rmopen[data-tab="home"],html:has(> body.rmopen[data-tab="home"]){background:#F6FEE4!important}
/* owner 2026-10-21: no top bar on the roadmap page at all (the hamburger is gone here; the page has its own Back) */
body.rmopen[data-tab="home"] .topbar{display:none}
body.rmopen #hzBack{display:none!important}
#rmPage *{box-sizing:border-box}

/* 3D map */
.rm-view{position:absolute;inset:0;perspective:700px;perspective-origin:50% 53%;overflow:hidden;touch-action:none;cursor:grab;background:#EBFAE6}
.rm-skyfill{position:absolute;left:0;right:0;top:0;background:#FFFFFF}
.rm-view.rm-drag{cursor:grabbing}
.rm-world{position:absolute;left:50%;top:67%;width:0;height:0;transform-style:preserve-3d;transform-origin:0 0}
.rm-mapsvg{position:absolute;left:0;top:0}
.rm-bb{position:absolute;width:0;height:0;transform-style:preserve-3d;transform:rotateZ(var(--byaw)) rotateX(var(--btilt))}
.rm-lbb{transition:opacity .3s}
.rm-bb>*{position:absolute;left:0;bottom:0;transform:translateX(-50%)}
.rm-rail{position:absolute;transform-origin:50% 100%}
.rm-dot{position:absolute;width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;border:3px solid #1C1C1E;background:#FFFFFF;display:flex;align-items:center;justify-content:center}
.rm-dot.s-done{background:#1C1C1E}.rm-dot.s-prog{background:#FFD60A}.rm-dot.s-wait{background:#DDE5FD;border-color:#2F5BEA}.rm-dot.s-skip{background:#F2F2F7;border-color:#D1D1D6;border-style:dashed}

.rm-lab{display:flex;flex-direction:column;align-items:center;cursor:pointer}
.rm-tile{width:66px;height:66px;border-radius:18px;background:#FFFFFF;border:2px solid #1C1C1E;display:flex;align-items:center;justify-content:center;transition:transform .25s,background .25s}
.rm-lab.on .rm-tile{background:#FFF4C7;transform:scale(1.14)}
.rm-lab.done .rm-tile{background:#EBFAE6}
.rm-lab.skip{opacity:.45}
.rm-lname{margin-top:5px;font-size:17px;font-weight:800;white-space:nowrap;background:#FFFFFF;border-radius:8px;padding:2px 7px;border:1.5px solid #1C1C1E}
.rm-stem{width:2.5px;height:56px;background:#1C1C1E}
.rm-pin{pointer-events:none}

/* header */
.rm-top{position:absolute;left:0;right:0;top:0;padding:calc(env(safe-area-inset-top,0px) + 12px) 20px 12px;text-align:center;z-index:5;background:#FFFFFF;border-bottom:1px solid #F2F2F7}
.rm-back{position:absolute;left:16px;top:calc(env(safe-area-inset-top,0px) + 8px);width:36px;height:36px;border-radius:18px;border:none;background:#F2F2F7;display:flex;align-items:center;justify-content:center;padding:0}
.rm-pill{display:inline-block;border:1.5px solid #33CC00;color:#259200;border-radius:20px;padding:5px 12px;font-size:11px;font-weight:700;letter-spacing:.08em}
.rm-title{font-size:28px;font-weight:800;letter-spacing:-.03em;margin:8px 0 3px;line-height:1.05}
.rm-sub{font-size:13.5px;color:#6E6E73;font-weight:500}
.rm-bar{height:6px;border-radius:3px;background:#F2F2F7;margin:9px auto 0;max-width:220px;overflow:hidden}
.rm-bar i{display:block;height:100%;background:#33CC00;border-radius:3px;transition:width .4s}

/* sky bits */
.rm-sky{position:absolute;left:0;right:0;pointer-events:none;z-index:1}
.rm-bird{position:absolute;animation:rm-fly 26s linear infinite}
@keyframes rm-fly{from{transform:translateX(-60px)}to{transform:translateX(470px)}}

/* floating card: sits above the native glass bar (the ticker is away while the roadmap is up) */
.rm-card{position:absolute;left:12px;right:12px;bottom:max(calc(var(--nav-top, calc(76px + env(safe-area-inset-bottom,0px))) + 8px),calc(var(--kb,0px) + 8px));z-index:6;background:#F6FEE4 url("./atlas-bg.jpg") no-repeat center top/100% 100%;border-radius:24px;border:none;box-shadow:0 12px 32px rgba(0,0,0,.12);overflow:hidden;display:flex;flex-direction:column;max-height:min(76%,calc(100% - 150px - var(--kb,0px)));transition:max-height .35s cubic-bezier(.3,.7,.2,1),bottom .25s ease}
.rm-card:not(.rm-big){max-height:260px} /* folded: just the header (owner 2026-10-21: the chat appears when you open it) */
.rm-grab{width:40px;height:5px;border-radius:3px;background:#D1D1D6;margin:8px auto 0;flex-shrink:0;touch-action:none}
.rm-chead{display:grid;grid-template-columns:44px minmax(0,1fr) 44px;align-items:center;gap:10px;padding:9px 12px 0;cursor:pointer;flex-shrink:0;touch-action:none} /* his mock measured 2026-10-21: 35px circles 24px in, name 18px, status line 13.5px */
.rm-card:not(.rm-big) .rm-chead{padding-bottom:4px}
.rm-card:not(.rm-big):not(:has(.rm-ntf)) .rm-chead{padding-bottom:14px}
.rm-ckick{font-size:11.5px;color:#6E6E73;font-weight:700;letter-spacing:.06em;margin-bottom:2px}
.rm-cicon{width:52px;height:52px;border-radius:15px;background:#F2F2F7;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.rm-cmid{min-width:0;text-align:center}
.rm-ct{font-size:21px;font-weight:800;letter-spacing:-.02em;line-height:1.15}
.rm-cm{margin-top:3px;display:flex;justify-content:center;align-items:center;gap:6px;font-size:14px;font-weight:600;color:#6E6E73;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rm-sdot{width:8px;height:8px;border-radius:4px;display:inline-block;flex:none}
.rm-sdot.d-none{background:#D1D1D6}.rm-sdot.d-prog{background:#FFD60A}.rm-sdot.d-wait{background:#FF6B2C}.rm-sdot.d-done{background:#259200}.rm-sdot.d-skip{background:#6E6E73}
.rm-chip{display:inline-block;font-size:12px;font-weight:700;padding:4px 9px;border-radius:9px}
.rm-chip.c-due{background:#DDE5FD;color:#2F5BEA}
.rm-chip.c-done{background:#EBFAE6;color:#259200}.rm-chip.c-prog{background:#FFF4C7;color:#3D2E00}.rm-chip.c-wait{background:#DDE5FD;color:#2F5BEA}.rm-chip.c-none,.rm-chip.c-skip{background:#F2F2F7;color:#6E6E73}
.rm-ckbtn,.rm-fwd{width:44px;height:44px;border-radius:22px;border:none;display:flex;align-items:center;justify-content:center;padding:0;-webkit-tap-highlight-color:transparent}
.rm-ckbtn{background:#FFFFFF;box-shadow:0 1px 2px rgba(0,0,0,.04),0 6px 16px rgba(22,88,0,.08)}
.rm-ckbtn.on{background:#EBFAE6}
.rm-fwd{background:#000000}
.rm-ckbtn svg{width:18px;height:18px}
.rm-fwd svg{width:15px;height:15px}
.rm-fwd:disabled{opacity:.35}

/* the step as a conversation with Atlas (his mock, 2026-10-21): label + gray bubbles, the Ask Atlas bar at the bottom */
.rm-cbody{display:flex;flex-direction:column;flex:1;min-height:0} /* owner 2026-10-21: the Ask Atlas chat, shrunk: its wallpaper, Atlas as plain text, only what you send in a bubble */
.rm-card:not(.rm-big) .rm-cbody{display:none}
.rm-chat{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;touch-action:pan-y;padding:16px 24px 6px 28px;-webkit-mask-image:linear-gradient(180deg,transparent 0,rgba(0,0,0,.35) 10px,rgba(0,0,0,.8) 22px,#000 36px);mask-image:linear-gradient(180deg,transparent 0,rgba(0,0,0,.35) 10px,rgba(0,0,0,.8) 22px,#000 36px)} /* owner 2026-10-22: vertical only (no side sway), words fade into the top like the Ask Atlas chat */
.rm-who{display:flex;align-items:center;gap:8px;margin:4px 0 8px;font-size:15px;font-weight:600;color:#6E6E73}
.rm-av{width:22px;height:22px;border-radius:11px;background:#000000;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}
.rm-m{display:flex;margin:0 0 8px}
.rm-m.u{justify-content:flex-end}
.rm-mb{max-width:88%;font:400 16px/1.45 'Manrope',-apple-system,sans-serif;color:#1C1C1E;padding:2px 0;white-space:pre-wrap;word-wrap:break-word}
.rm-mb b{color:#1C1C1E;font-weight:700}
.rm-m.u .rm-mb{max-width:88%;background:#000000;color:#FFFFFF;border-radius:22px;border-bottom-right-radius:10px;padding:10px 14px}
.rm-ck{background:#FFFFFF;border-radius:16px;padding:12px 12px 10px;margin:0 0 12px}
.rm-ckt{font-size:11.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#6E6E73;margin:10px 0 4px}
.rm-ckt:first-child{margin-top:0}
.rm-ckgo{display:flex;align-items:center;gap:9px;width:100%;height:42px;padding:0 14px;border:none;border-radius:21px;background:#000000;color:#FFFFFF;font:700 14.5px/1 'Inter Tight',system-ui,sans-serif;margin:0 0 6px;-webkit-tap-highlight-color:transparent}
.rm-ckgo:active{opacity:.75}
.rm-ckadd{display:inline-flex;align-items:center;height:30px;padding:0 12px;border-radius:999px;border:1px solid #D1D1D6;background:#FFFFFF;color:#1C1C1E;font:700 13px/1 'Inter Tight',system-ui,sans-serif;-webkit-tap-highlight-color:transparent}
.rm-ckadd.on{background:#EBFAE6;border-color:#EBFAE6;color:#259200}
.rm-ckadd:active{background:#F2F2F7}
.rm-notes{display:flex;flex-direction:column;align-items:flex-start;gap:6px;margin:4px 0 2px}
.rm-note{font-size:13.5px;font-weight:500;line-height:1.35;color:#1C1C1E;background:#F2F2F7;border-radius:10px;padding:7px 10px;white-space:pre-wrap}
.rm-tt small{display:block;font-size:12px;font-weight:600;color:#6E6E73;margin-top:2px}
.rm-tdue{position:relative;flex:none;width:30px;height:30px;border-radius:15px;display:flex;align-items:center;justify-content:center;color:#6E6E73;background:#F2F2F7;margin-top:-3px}
.rm-tdue.set{color:#259200;background:#EBFAE6}
.rm-tdue input{position:absolute;inset:0;opacity:0;width:100%;height:100%;margin:0;border:0;padding:0}
.rm-cl{list-style:none;margin:0;padding:0}
.rm-cl li{display:flex;align-items:flex-start;gap:9px;padding:7px 0;cursor:pointer}
.rm-cl li+li{border-top:1px solid #F2F2F7}
.rm-box{width:22px;height:22px;border-radius:7px;border:2px solid #D1D1D6;background:#FFFFFF;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px;box-sizing:border-box}
.rm-cl li.ok .rm-box{background:#33CC00;border-color:#33CC00}
.rm-tt{flex:1;font-size:14.5px;font-weight:600;line-height:1.3}
.rm-cl li.ok .rm-tt{color:#6E6E73;text-decoration:line-through}
.rm-dates,.rm-docs{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:4px 0 2px}
.rm-dchip{position:relative;font-size:12.5px;font-weight:700;color:#6E6E73;background:#F2F2F7;border-radius:999px;padding:7px 11px}
.rm-dchip.set{color:#1C1C1E;background:#FFF4C7}
.rm-dchip input{position:absolute;inset:0;opacity:0;width:100%;height:100%;margin:0;border:0;padding:0}
.rm-docs span{font-size:12px;font-weight:700;color:#2F5BEA;background:#DDE5FD;border-radius:10px;padding:5px 9px}
/* the Actions menu (the Ask Atlas quick-actions look), only while the Actions chip is on */
.rm-actmenu{flex:none;display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:4px 12px 6px}
.rm-actrow{display:flex;align-items:center;padding:11px 12px;border-radius:13px;background:#FFFFFF;border:1px solid #D1D1D6;color:#1C1C1E;font:600 14px/1.2 'Inter Tight',system-ui,sans-serif;text-align:left;-webkit-tap-highlight-color:transparent}
.rm-actrow:active{background:#F2F2F7}
/* the bar: the real Ask Atlas bar (coach.js classes + its live glow); only the shell around it is ours */
.rm-ibar{position:relative;flex:none;padding:10px 12px 12px;background:rgba(255,255,255,.32);border-top:1px solid rgba(255,255,255,.65);-webkit-backdrop-filter:blur(18px) saturate(1.2);backdrop-filter:blur(18px) saturate(1.2);border-radius:28px 28px 0 0;box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 -8px 24px rgba(22,88,0,.06)} /* owner 2026-10-22 pm: the same frosted tray as Ask Atlas (32% white, 18px blur, 28px corners) */
.rm-ibar .coachWrap{width:auto}
.rm-ibar .coachSend .ico-arrow{display:none}
.rm-ibar.hasText .coachSend .ico-wave{display:none}
.rm-ibar.hasText .coachSend .ico-arrow{display:block}
.rm-ibar.rec .coachSend{background:#E5383B;animation:coachPulse 1s ease-in-out infinite}
.rm-dots{display:inline-flex;gap:4px;padding:4px 2px}
.rm-dots i{width:6px;height:6px;border-radius:3px;background:#6E6E73;animation:rm-dot 1s infinite ease-in-out}
.rm-dots i:nth-child(2){animation-delay:.15s}.rm-dots i:nth-child(3){animation-delay:.3s}
@keyframes rm-dot{0%,80%,100%{opacity:.3;transform:translateY(0)}40%{opacity:1;transform:translateY(-3px)}}
.rm-hint{position:absolute;left:0;right:0;z-index:4;text-align:center;pointer-events:none;transition:opacity .5s}
.rm-hint span{display:inline-block;background:#1C1C1E;color:#FFFFFF;font-size:12.5px;font-weight:700;border-radius:14px;padding:6px 12px}
/* tappable replies under the question Atlas just asked */
.rm-qa{display:flex;flex-wrap:wrap;gap:11px 8px;padding:3px 0 10px}
.rm-qab{height:30px;padding:0 15px;border-radius:999px;background:#FFFFFF;border:none;color:#1C1C1E;font:700 14px/30px 'Inter Tight',system-ui,sans-serif;box-shadow:0 1px 2px rgba(0,0,0,.04);-webkit-tap-highlight-color:transparent} /* his mock 2026-10-21: pills, the first one black */
.rm-qab:first-child{background:#000000;color:#FFFFFF}
.rm-qab:active{opacity:.7}
/* the step's notification row inside the folded card (his mock 2026-10-22): Atlas dot, "Atlas · now", the line; press grows it, swipe left deletes it */
.rm-ntw{position:relative;margin:8px 6px 8px;border-radius:14px;transition:opacity .2s,max-height .25s;max-height:140px}
.rm-ntw.gone{opacity:0;max-height:0;margin:0 6px;overflow:hidden}
.rm-ntw:has(.rm-ntf.drag){overflow:hidden}
.rm-ntdel{position:absolute;inset:0;border-radius:14px;background:#E5383B;color:#FFFFFF;opacity:0;transition:opacity .15s} /* the Budget list's red card behind the row */
.rm-ntdl{position:absolute;right:0;top:0;bottom:0;width:64px;display:flex;align-items:center;justify-content:center;gap:8px;overflow:hidden;font:400 15px/1 'Manrope',-apple-system,sans-serif;white-space:nowrap}
.rm-ntdl svg{width:20px;height:20px;flex:none}
.rm-ntw.gone .rm-ntdel{opacity:1}
.rm-ntf{position:relative;display:flex;align-items:center;gap:11px;padding:14px 14px 13px 13px;background:rgba(255,255,255,.62);border-radius:14px;cursor:pointer;touch-action:pan-y;will-change:transform;transition:transform .22s cubic-bezier(.32,.72,0,1)}
.rm-ntf.press{transform:scale(1.03)}
.rm-ntf.drag{transition:none}
.rm-ntf{transition:transform .22s cubic-bezier(.32,.72,0,1),opacity .2s,background-color .15s}
.rm-ntw.live .rm-ntf{background:#FFFFFF} /* solid while it slides, so the red card does not bleed through (the Budget row is solid) */
.rm-nav2{width:31px;height:31px;border-radius:16px;background:#000000;display:flex;align-items:center;justify-content:center;flex:none}
.rm-ntb{flex:1;min-width:0}
.rm-nth{display:flex;align-items:baseline;justify-content:space-between;gap:10px;font:700 14px/1.2 'Inter Tight',system-ui,sans-serif;color:#1C1C1E}
.rm-nth span{font-weight:500;color:#6E6E73}
.rm-ntm{margin-top:3px;font:400 16.5px/1.33 'Inter Tight',system-ui,sans-serif;color:#1C1C1E}
/* previous chats at the top of the chat */
.rm-prev{margin:0 0 12px}
.rm-prevh{display:inline-flex;align-items:center;gap:7px;height:30px;padding:0 12px;border-radius:999px;border:1px solid #D1D1D6;background:#FFFFFF;color:#1C1C1E;font:700 13px/1 'Inter Tight',system-ui,sans-serif;-webkit-tap-highlight-color:transparent}
.rm-prevh i{width:7px;height:7px;border-right:2px solid #6E6E73;border-bottom:2px solid #6E6E73;transform:rotate(45deg) translateY(-2px);transition:transform .2s}
.rm-prev.on .rm-prevh i{transform:rotate(-135deg) translateY(-1px)}
.rm-prev .rm-past{margin-top:8px}
/* previous chat sessions (list + inline transcript) */
.rm-past{display:flex;flex-direction:column;gap:6px;margin:4px 0 2px}
.rm-pch{display:flex;flex-direction:column;align-items:flex-start;gap:2px;width:100%;text-align:left;border:none;border-radius:12px;background:#F2F2F7;padding:9px 12px;font:600 12px/1.2 'Inter Tight',system-ui,sans-serif;color:#6E6E73;-webkit-tap-highlight-color:transparent}
.rm-pch b{font-size:13.5px;font-weight:700;color:#1C1C1E;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.rm-pc.on .rm-pch{border-radius:12px 12px 0 0}
.rm-pcb{background:#F2F2F7;border-radius:0 0 12px 12px;padding:2px 12px 10px;display:flex;flex-direction:column;gap:6px}
.rm-pm{font:400 13.5px/1.35 'Manrope',-apple-system,sans-serif;color:#1C1C1E}
.rm-pm.u{align-self:flex-end;background:#000000;color:#FFFFFF;border-radius:14px;border-bottom-right-radius:6px;padding:6px 10px;max-width:88%}

/* owner 2026-10-23: the checklist drawer, the Ask Atlas chats panel's twin (coach.js .coachDrawer): 86% wide, the wallpaper,
   swipes in from the left over the map, a dim over the rest; a tap on the dim, the x, or a swipe left puts it away */
.rm-dim{position:absolute;inset:0;z-index:48;cursor:pointer;background:rgba(0,0,4,.28);opacity:0;pointer-events:none;transition:opacity .3s}
#rmPage.ckopen .rm-dim{opacity:1;pointer-events:auto}
.rm-drawer{position:absolute;top:0;bottom:0;left:0;width:86%;max-width:360px;z-index:49;display:flex;flex-direction:column;background:#F6FEE4 url('./atlas-bg.jpg') no-repeat center top/100% 100%;box-shadow:0 0 40px rgba(22,88,0,.18);padding:calc(10px + env(safe-area-inset-top,0px)) 16px 0;transform:translateX(-104%);transition:transform .32s cubic-bezier(.22,.8,.3,1);touch-action:pan-y}
#rmPage.ckopen .rm-drawer{transform:none}
.rm-drawer.dragging{transition:none}
.rm-drtop{display:flex;align-items:center;justify-content:space-between;height:48px;flex:none}
.rm-drtop b{font:800 26px/1 'Inter Tight',system-ui,sans-serif;color:#1C1C1E;letter-spacing:-.02em}
.rm-drx{width:42px;height:42px;border:none;border-radius:21px;background:#FFFFFF;display:grid;place-items:center;box-shadow:0 1px 2px rgba(0,0,0,.04),0 6px 16px rgba(22,88,0,.08);-webkit-tap-highlight-color:transparent}
.rm-drsub{flex:none;font:600 12.5px/1.2 'Inter Tight',system-ui,sans-serif;color:#6E6E73;letter-spacing:.04em;text-transform:uppercase;margin:2px 0 10px}
.rm-drlist{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding:2px 0 calc(var(--nav-top,110px) + 12px)}
.rm-drlist .rm-ck{margin:0}