/* Home page: the animated web dashboard (WebDashboardDemo.razor). A hand-drawn twin of /admin that plays the real
   page's motion on a 26 s loop: amounts roll up, the sparklines draw left to right, the Settle bar grows, the Bills
   Before Payday tiles slide past forever, a pointer taps a Smart Signal and the investment-alert sheet slides up,
   holds, closes, and the loop rests before it starts over. Sits on the hd-* tokens in home-story.css (which must load
   first) and the cp-* tokens in home-showcase.css. Convention: an element's base style is its finished frame; the
   keyframes describe the journey, so reduced-motion users see the dashboard at rest. Sizes are container units (cqw)
   of the stage, so every part stays proportional at any width. Colours follow the real dashboard's --fp-* tokens. */

.hm-dash-stage { --hm-t: 26s; --hd-liab: #dc2626; --hd-liab-area: #ff5f7a; --hd-inv: #15803d; --hd-inv-area: #16a34a; --hd-pill: rgba(255, 255, 255, .72); --hd-pill-border: #d6d0ff; --hd-soft: #f3f6ff; --hd-tile: #f3f6ff; --hd-tile-border: #e6e4f6; --hd-due: #f0eeff; --hd-due-text: #565973; --hd-hero: linear-gradient(135deg, #eceefb, #f5f6fd); --hd-hero-line: #4632cd; --hd-sheet: var(--cp-surface); --hd-row: #f3f4fb; }
[data-bs-theme="dark"] .hm-dash-stage { --hd-liab: #c76b78; --hd-liab-area: #b85c6c; --hd-inv: #3fa66f; --hd-inv-area: #2e8b57; --hd-pill: rgba(43, 49, 73, .6); --hd-pill-border: #2b3045; --hd-soft: rgba(43, 49, 73, .55); --hd-tile: #1f2233; --hd-tile-border: #39405c; --hd-due: #2b3149; --hd-due-text: #b4b7c9; --hd-hero: linear-gradient(135deg, #1a1f3d, #171b30); --hd-hero-line: #7c6af2; --hd-sheet: #1c2030; --hd-row: #262b3d; }
/* The frame takes its natural height (the real page is taller than it is wide), so nothing is ever clipped. */
.hd-web-frame { position: relative; border: 1px solid var(--cp-border); border-radius: 1.6cqw; background: color-mix(in srgb, var(--cp-text) 3%, var(--cp-surface)); box-shadow: var(--hs-shadow); overflow: hidden; }
.hd-web-bar { display: flex; align-items: center; gap: .7cqw; height: 3.2cqw; padding: 0 1.4cqw; border-bottom: 1px solid var(--cp-border); background: color-mix(in srgb, var(--cp-text) 5%, var(--cp-surface)); }
.hd-web-bar span { width: .9cqw; height: .9cqw; border-radius: 50%; background: #ef4444; }
.hd-web-bar span:nth-child(2) { background: #f59e0b; } .hd-web-bar span:nth-child(3) { background: #22c55e; }
.hd-web-bar b { margin-left: 1cqw; padding: .35cqw 1.2cqw; border-radius: 999px; background: color-mix(in srgb, var(--cp-text) 6%, transparent); color: var(--cp-text-muted); font-size: clamp(.4rem, 1cqw, .6rem); font-weight: 700; }
.hd-web-bar em { display: inline-flex; align-items: center; gap: .4cqw; margin-left: auto; padding: .35cqw 1cqw; border: 1px solid var(--cp-accent); border-radius: .6cqw; color: var(--cp-accent); font-size: clamp(.4rem, 1cqw, .6rem); font-style: normal; font-weight: 700; }
.hd-dash { display: grid; gap: 1cqw; padding: 1.1cqw 1.3cqw 1.3cqw; }
.hd-dash i.bx, .hd-dash i.fa-solid { line-height: 1; }

/* ---- Counters: the same @property integers and pad counter-styles home-story.css declares. ---- */
.hd-n { counter-reset: hmk var(--hm-k) hmr var(--hm-r) hmc var(--hm-c); animation-timing-function: cubic-bezier(.2, .8, .25, 1); }
.hd-n::before { content: "$" counter(hmk) "," counter(hmr, hm-pad3) "." counter(hmc, hm-pad2); }
.hd-n.is-small::before { content: "$" counter(hmr) "." counter(hmc, hm-pad2); }
.hd-n.is-neg::before { content: "-$" counter(hmk) "," counter(hmr, hm-pad3) "." counter(hmc, hm-pad2); }
.hd-n.is-whole::before { content: "$" counter(hmr); }
.hd-n-assets { --hm-k: 4; --hm-r: 125; --hm-c: 73; animation-name: hd-n-assets; }
.hd-n-net { --hm-k: 19; --hm-r: 831; --hm-c: 87; animation-name: hd-n-net; }
.hd-n-liab { --hm-k: 23; --hm-r: 957; --hm-c: 60; animation-name: hd-n-liab; }
.hd-n-manual { --hm-k: 2; --hm-r: 970; --hm-c: 94; animation-name: hd-n-manual; }
.hd-n-spend { --hm-k: 10; --hm-r: 117; --hm-c: 9; animation-name: hd-n-spend; }
.hd-n-safe { --hm-k: 3; --hm-r: 600; --hm-c: 56; animation-name: hd-n-safe; }
.hd-n-bills { --hm-r: 525; --hm-c: 17; animation-name: hd-n-bills; }
.hd-n-after { --hm-k: 8; --hm-r: 949; --hm-c: 10; animation-name: hd-n-after; }
.hd-n-owed { --hm-r: 31; --hm-c: 97; animation-name: hd-n-owed; }
.hd-n-youowe { --hm-r: 468; --hm-c: 69; animation-name: hd-n-youowe; }
.hd-n-inv { --hm-k: 32; --hm-r: 443; --hm-c: 0; animation-name: hd-n-inv; }
.hd-n-billsdue { --hm-r: 525; animation-name: hd-n-billsdue; }
.hd-n-settlenet { --hm-r: 436; --hm-c: 72; animation-name: hd-n-settlenet; }
@keyframes hd-n-assets { 0%, 3% { --hm-k: 0; --hm-r: 0; --hm-c: 0; } 15%, 100% { --hm-k: 4; --hm-r: 125; --hm-c: 73; } }
@keyframes hd-n-net { 0%, 3% { --hm-k: 0; --hm-r: 0; --hm-c: 0; } 15%, 100% { --hm-k: 19; --hm-r: 831; --hm-c: 87; } }
@keyframes hd-n-liab { 0%, 3% { --hm-k: 0; --hm-r: 0; --hm-c: 0; } 15%, 100% { --hm-k: 23; --hm-r: 957; --hm-c: 60; } }
@keyframes hd-n-manual { 0%, 3% { --hm-k: 0; --hm-r: 0; --hm-c: 0; } 15%, 100% { --hm-k: 2; --hm-r: 970; --hm-c: 94; } }
@keyframes hd-n-spend { 0%, 3% { --hm-k: 0; --hm-r: 0; --hm-c: 0; } 15%, 100% { --hm-k: 10; --hm-r: 117; --hm-c: 9; } }
@keyframes hd-n-safe { 0%, 3% { --hm-k: 0; --hm-r: 0; --hm-c: 0; } 15%, 100% { --hm-k: 3; --hm-r: 600; --hm-c: 56; } }
@keyframes hd-n-bills { 0%, 3% { --hm-r: 0; --hm-c: 0; } 15%, 100% { --hm-r: 525; --hm-c: 17; } }
@keyframes hd-n-after { 0%, 3% { --hm-k: 0; --hm-r: 0; --hm-c: 0; } 15%, 100% { --hm-k: 8; --hm-r: 949; --hm-c: 10; } }
@keyframes hd-n-owed { 0%, 3% { --hm-r: 0; --hm-c: 0; } 15%, 100% { --hm-r: 31; --hm-c: 97; } }
@keyframes hd-n-youowe { 0%, 3% { --hm-r: 0; --hm-c: 0; } 15%, 100% { --hm-r: 468; --hm-c: 69; } }
@keyframes hd-n-inv { 0%, 3% { --hm-k: 0; --hm-r: 0; --hm-c: 0; } 15%, 100% { --hm-k: 32; --hm-r: 443; --hm-c: 0; } }
@keyframes hd-n-billsdue { 0%, 3% { --hm-r: 0; } 15%, 100% { --hm-r: 525; } }
@keyframes hd-n-settlenet { 0%, 12% { --hm-r: 0; --hm-c: 0; } 21%, 100% { --hm-r: 436; --hm-c: 72; } }

/* ---- Hero + KPI strip ---- */
.hd-dash-top { display: grid; grid-template-columns: 1.05fr 3fr; gap: 1cqw; }
.hd-hero { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: .45cqw; padding: 1cqw 1.2cqw 1.1cqw; border: 1px solid var(--cp-border); border-radius: 1.2cqw; background: var(--hd-hero); overflow: hidden; isolation: isolate; }
.hd-hero > * { position: relative; z-index: 1; }
.hd-hero-spark { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; opacity: .55; clip-path: inset(-4px -4px -4px -4px); -webkit-mask-image: linear-gradient(to bottom, transparent 10%, #000 45%); mask-image: linear-gradient(to bottom, transparent 10%, #000 45%); }
.hd-hero-area { fill: var(--hd-hero-line); opacity: .16; animation-name: hd-fade-early; }
.hd-hero-line { fill: none; stroke: var(--hd-hero-line); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
/* Charts reveal with a left-to-right wipe (clip-path) rather than a dash offset: Chromium ignores pathLength for dashes once the stroke is non-scaling. */
.hd-hero-spark { animation-name: hd-draw-early; }
.hd-hero small { color: var(--cp-text-muted); font-size: clamp(.36rem, .7cqw, .5rem); font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.hd-hero > .hd-n { color: var(--cp-text); font-size: clamp(.8rem, 2.3cqw, 1.5rem); font-weight: 800; letter-spacing: -.02em; line-height: 1.1; }
.hd-hero-pill { display: inline-flex; align-items: center; gap: .4cqw; padding: .28cqw .8cqw; border-radius: 999px; background: var(--hd-pill); border: 1px solid var(--hd-pill-border); color: var(--cp-text-muted); font-size: clamp(.36rem, .72cqw, .52rem); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
.hd-hero-pill b { color: var(--cp-text); font-weight: 800; letter-spacing: 0; text-transform: none; }
.hd-hero-pill i { color: var(--cp-accent); font-size: 1.15em; }
.hd-hero-pill.is-bad { background: color-mix(in srgb, var(--hm-bad) 14%, var(--cp-surface)); border-color: transparent; color: var(--hm-bad); }
.hd-hero-pill.is-bad i, .hd-hero-pill.is-bad b { color: var(--hm-bad); }
.hd-hero-cap { position: absolute; right: 1cqw; bottom: .5cqw; color: var(--cp-text-muted); font-size: clamp(.3rem, .55cqw, .42rem); font-style: normal; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; opacity: .7; }
.hd-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .8cqw 1.4cqw; padding: 1cqw 1.4cqw; border: 1px solid var(--cp-border); border-radius: 1.2cqw; background: var(--cp-surface); }
.hd-kpis > div { display: flex; align-items: center; gap: .8cqw; min-width: 0; }
.hd-kpis > div > i { flex: none; display: grid; place-items: center; width: max(2.2cqw, 1.1rem); height: max(2.2cqw, 1.1rem); border-radius: .6cqw; background: var(--cp-accent-soft); color: var(--cp-accent); font-size: max(1.15cqw, .6rem); }
.hd-kpis small { display: block; color: var(--cp-text-muted); font-size: clamp(.34rem, .68cqw, .5rem); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hd-kpis b { display: block; color: var(--cp-text); font-size: clamp(.5rem, 1.2cqw, .8rem); font-weight: 800; letter-spacing: -.01em; white-space: nowrap; }

/* ---- The four cards ---- */
.hd-cards4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1cqw; }
.hd-card4 { position: relative; display: flex; flex-direction: column; gap: .4cqw; min-width: 0; padding: 1cqw 1.1cqw 1.1cqw; border: 1px solid var(--cp-border); border-radius: 1.2cqw; background: var(--cp-surface); overflow: hidden; isolation: isolate; }
.hd-card4 > * { position: relative; z-index: 1; }
.hd-card4.is-liab { animation-name: hd-card-in-1; } .hd-card4.is-inv { animation-name: hd-card-in-2; } .hd-card4.is-bills { animation-name: hd-card-in-3; } .hd-card4.is-settle { animation-name: hd-card-in-4; }
.hd-card-head { display: flex; align-items: center; gap: .6cqw; }
.hd-card-head > i { display: grid; place-items: center; width: max(2.2cqw, 1.1rem); height: max(2.2cqw, 1.1rem); border-radius: .6cqw; font-size: max(1cqw, .55rem); color: var(--cp-accent); background: var(--cp-accent-soft); }
.is-liab .hd-card-head > i { color: #dc2626; background: rgba(220, 38, 38, .12); }
.is-inv .hd-card-head > i { color: #16a34a; background: rgba(22, 163, 74, .12); }
.is-bills .hd-card-head > i { color: #d97706; background: rgba(217, 119, 6, .12); }
.hd-card-head b { color: var(--cp-text); font-size: clamp(.38rem, .78cqw, .58rem); font-weight: 800; letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hd-card-head span { margin-left: auto; color: var(--cp-accent); font-size: clamp(.34rem, .68cqw, .5rem); font-weight: 700; white-space: nowrap; }
.hd-card-value { color: var(--cp-text); font-size: clamp(.6rem, 1.5cqw, 1rem); font-weight: 800; letter-spacing: -.01em; line-height: 1.15; }
.hd-card-spark { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; opacity: .7; clip-path: inset(-4px -4px -4px -4px); -webkit-mask-image: linear-gradient(to bottom, transparent 18%, #000 55%); mask-image: linear-gradient(to bottom, transparent 18%, #000 55%); }
.hd-card-area { fill: var(--hd-area); opacity: .22; animation-name: hd-fade-mid; }
.hd-card-line { fill: none; stroke: var(--hd-line); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.is-liab { --hd-area: var(--hd-liab-area); --hd-line: var(--hd-liab); }
.is-inv { --hd-area: var(--hd-inv-area); --hd-line: var(--hd-inv); }
.is-liab .hd-card-spark { animation-name: hd-draw-liab; } .is-inv .hd-card-spark { animation-name: hd-draw-inv; }
.hd-card-cap { position: absolute; right: .9cqw; bottom: .55cqw; z-index: 1; color: var(--cp-text-muted); font-size: clamp(.3rem, .55cqw, .42rem); font-style: normal; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; opacity: .8; }
.hd-card4.is-liab, .hd-card4.is-inv { padding-bottom: 1.9cqw; }
.hd-pills { display: flex; flex-wrap: wrap; align-items: flex-start; gap: .38cqw; }
.hd-pills.is-stack { flex-direction: column; }
.hd-pill { display: inline-flex; align-items: center; flex-wrap: wrap; gap: .25cqw .35cqw; max-width: 100%; padding: .22cqw .6cqw; border-radius: .9cqw; border: 1px solid var(--hd-pill-border); background: var(--hd-pill); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); color: var(--cp-text); font-size: clamp(.34rem, .68cqw, .52rem); font-weight: 600; line-height: 1.25; }
.hd-pill > i { flex: none; width: max(.9cqw, .5rem); text-align: center; font-size: max(.66cqw, .4rem); color: var(--cp-text); }
.hd-pill b { font-weight: 800; }
.hd-pill u { text-decoration: none; color: var(--cp-text-muted); }
.hd-pill.is-amber, .hd-pill.is-amber > i { color: var(--hm-warn); }
.hd-pill.is-soft { border-color: transparent; background: var(--hd-soft); -webkit-backdrop-filter: none; backdrop-filter: none; white-space: nowrap; flex-wrap: nowrap; }
.hd-pill.is-soft > i { color: var(--cp-accent); }
.hd-pill.is-soft > i.tone-ok { color: var(--hm-ok); }
.hd-gauge { --hm-g: 47; background: linear-gradient(90deg, rgba(239, 68, 68, .32) calc(var(--hm-g) * 1%), var(--hd-pill) calc(var(--hm-g) * 1%)); animation-name: hd-gauge; }
.is-liab .hd-pill:nth-child(1) { animation-name: hd-rise-a; } .is-liab .hd-pill:nth-child(2) { animation-name: hd-rise-b; } .is-liab .hd-pill:nth-child(3) { animation-name: hd-rise-c; } .is-liab .hd-pill:nth-child(4) { animation-name: hd-rise-d; } .is-liab .hd-pill:nth-child(5) { animation-name: hd-rise-e; }
.is-inv .hd-pill:nth-child(1) { animation-name: hd-rise-b; } .is-inv .hd-pill:nth-child(2) { animation-name: hd-rise-c; } .is-inv .hd-pill:nth-child(3) { animation-name: hd-rise-d; } .is-inv .hd-pill:nth-child(4) { animation-name: hd-rise-e; }
.is-bills .hd-pill:nth-child(1) { animation-name: hd-rise-c; } .is-bills .hd-pill:nth-child(2) { animation-name: hd-rise-d; }

/* Bills Before Payday: payday pills left, total right, the endless tile strip, Safe To Spend on the sill. */
.hd-card4.is-bills { padding-bottom: 0; }
.hd-bills-top { display: flex; justify-content: space-between; align-items: flex-start; gap: .6cqw; }
.hd-bills-total { flex: 0 1 auto; min-width: 0; max-width: 56%; text-align: right; animation-name: hd-rise-c; }
.hd-bills-total span { display: block; color: var(--cp-text-muted); font-size: clamp(.32rem, .62cqw, .48rem); line-height: 1.25; }
.hd-bills-strip { flex: 1 1 auto; display: flex; align-items: center; margin: .3cqw -1.1cqw 0; padding: 0 1.1cqw; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
/* Tiles carry their own trailing gap so the track is exactly two copies wide and -50% loops seamlessly. */
.hd-bills-track { display: flex; width: max-content; padding: .3cqw 0; animation: hd-bills-flow 30s linear infinite; }
@keyframes hd-bills-flow { to { transform: translateX(-50%); } }
.hd-bill { position: relative; flex: none; display: flex; flex-direction: column; align-items: flex-start; gap: .1cqw; width: max(11.6cqw, 6.6rem); height: max(8cqw, 4.6rem); margin-right: .6cqw; padding: .55cqw .7cqw .5cqw; border: 1px solid var(--hd-tile-border); border-radius: 1.3cqw; background: var(--hd-tile); overflow: hidden; }
.hd-bill > i:first-child { position: absolute; top: -.6cqw; right: -.3cqw; z-index: 0; font-size: max(5.6cqw, 3rem); font-style: normal; font-weight: 900; line-height: 1; opacity: .22; }
.hd-bill > small, .hd-bill > b, .hd-bill > u, .hd-bill > em { position: relative; z-index: 1; }
.hd-bill small { max-width: 100%; color: var(--hd-due-text); font-size: clamp(.32rem, .62cqw, .48rem); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hd-bill b { color: var(--cp-text); font-size: clamp(.46rem, 1cqw, .7rem); font-weight: 800; line-height: 1.15; }
.hd-bill u { color: var(--hd-due-text); font-size: clamp(.28rem, .56cqw, .44rem); text-decoration: none; }
.hd-bill em { margin-top: auto; padding: .12cqw .45cqw; border-radius: .7cqw; background: var(--hd-due); color: var(--hd-due-text); font-size: clamp(.26rem, .5cqw, .4rem); font-style: normal; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.hd-bill em.is-now, .hd-bill em.is-soon { background: rgba(217, 119, 6, .16); color: var(--hm-warn); }
.hd-bill-partner { position: absolute; right: .45cqw; bottom: .45cqw; z-index: 1; display: grid; place-items: center; width: 1.7cqw; height: 1.7cqw; border-radius: 50%; background: rgba(70, 50, 205, .12); border: 1px solid rgba(70, 50, 205, .25); color: var(--cp-accent); font-size: .55cqw; }
.hd-bills-safe { display: flex; align-items: center; justify-content: center; gap: .5cqw; margin: auto -1.1cqw 0; padding: .55cqw 1cqw; background: #7c6af2; color: #fff; font-size: clamp(.36rem, .72cqw, .54rem); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; animation-name: hd-rise-e; }

/* Settle: the pocket Settle Up. */
.hd-settle-sides { display: grid; grid-template-columns: 1fr 1fr; gap: .5cqw; }
.hd-settle-sides > div { display: flex; align-items: center; gap: .5cqw; min-width: 0; padding: .55cqw .6cqw; border-radius: .9cqw; background: color-mix(in srgb, var(--hm-you) 12%, var(--cp-surface)); animation-name: hd-rise-c; }
.hd-settle-sides > .is-partner { background: color-mix(in srgb, var(--hm-partner) 14%, var(--cp-surface)); animation-name: hd-rise-d; }
.hd-settle-sides .fi-av { flex: none; width: max(2.3cqw, 1.3rem); height: max(2.3cqw, 1.3rem); }
.hd-settle-sides > div > div { min-width: 0; }
.hd-settle-sides small { display: block; color: var(--cp-text-muted); font-size: clamp(.3rem, .58cqw, .44rem); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hd-settle-sides b { display: block; color: var(--hm-you); font-size: clamp(.5rem, 1.15cqw, .8rem); font-weight: 800; line-height: 1.1; }
.hd-settle-sides .is-partner b { color: var(--hm-partner); }
.hd-settle-sides u { display: block; color: var(--cp-text-muted); font-size: clamp(.28rem, .54cqw, .42rem); text-decoration: none; }
.hd-settle-bar { display: flex; gap: .25cqw; height: .55cqw; margin-top: .2cqw; }
.hd-settle-bar i { display: block; height: 100%; border-radius: 999px; transform-origin: left center; }
.hd-settle-bar .is-you { flex: 936; background: var(--hm-you); animation-name: hd-bar-grow-you; }
.hd-settle-bar .is-partner { flex: 64; background: var(--hm-partner); animation-name: hd-bar-grow-partner; }
.hd-settle-net { display: flex; align-items: center; gap: .4cqw; color: var(--cp-text); font-size: clamp(.38rem, .78cqw, .58rem); font-weight: 800; white-space: nowrap; animation-name: hd-rise-e; }
.hd-settle-net > i { color: var(--hm-ok); font-size: 1.1em; }
.hd-settle-net b { font-weight: 800; }
.hd-settle-net u { color: var(--cp-text-muted); font-size: clamp(.32rem, .62cqw, .48rem); font-weight: 600; text-decoration: none; }
.hd-settle-row { display: flex; align-items: flex-start; gap: .5cqw; padding-top: .45cqw; border-top: 1px solid var(--cp-border); animation-name: hd-rise-f; }
.hd-settle-row + .hd-settle-row { animation-name: hd-rise-g; }
.hd-settle-row > i { flex: none; display: grid; place-items: center; width: max(1.8cqw, 1rem); height: max(1.8cqw, 1rem); border-radius: .5cqw; background: var(--cp-accent-soft); color: var(--cp-accent); font-size: max(.9cqw, .55rem); }
.hd-settle-row > div { display: grid; gap: .28cqw; min-width: 0; }
.hd-settle-row small { color: var(--cp-text-muted); font-size: clamp(.3rem, .58cqw, .44rem); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.hd-settle-row u { color: var(--cp-text-muted); font-size: clamp(.32rem, .62cqw, .48rem); text-decoration: none; }
.hd-settle-row u b { color: var(--cp-text); }
.hd-chips { display: flex; flex-wrap: wrap; gap: .3cqw; }
.hd-chips em { display: inline-flex; align-items: center; gap: .3cqw; padding: .12cqw .5cqw; border-radius: 999px; background: color-mix(in srgb, var(--cp-text) 7%, transparent); color: var(--cp-text-muted); font-size: clamp(.3rem, .58cqw, .44rem); font-style: normal; font-weight: 700; white-space: nowrap; }
.hd-chips em b { color: var(--cp-text); }
.hd-chips .is-cash { color: #16a34a; background: rgba(22, 163, 74, .12); } .hd-chips .is-check { color: #2563eb; background: rgba(37, 99, 235, .12); } .hd-chips .is-venmo { color: #3d95ce; background: rgba(61, 149, 206, .14); }
.hd-chips .is-rule { color: var(--cp-accent); background: var(--cp-accent-soft); }

/* ---- AI Smart Signals ---- */
.hd-sigrow { padding: .9cqw 1.1cqw 1cqw; border: 1px solid var(--cp-border); border-radius: 1.2cqw; background: color-mix(in srgb, var(--cp-accent) 4%, var(--cp-surface)); }
.hd-sigrow-head { display: flex; align-items: center; gap: .6cqw; }
.hd-sigrow-head > i { display: grid; place-items: center; width: max(2.2cqw, 1.2rem); height: max(2.2cqw, 1.2rem); border-radius: .6cqw; background: var(--cp-accent); color: #fff; font-size: max(1.2cqw, .65rem); }
.hd-sigrow-head b { color: var(--cp-text); font-size: clamp(.44rem, .95cqw, .66rem); font-weight: 800; }
.hd-sigrow-head span { color: var(--cp-text-muted); font-size: clamp(.32rem, .66cqw, .5rem); }
.hd-sigrow-head em { display: inline-flex; align-items: center; gap: .3cqw; padding: .25cqw .8cqw; border: 1px solid color-mix(in srgb, var(--cp-accent) 40%, var(--cp-border)); border-radius: 999px; background: var(--cp-accent-soft); color: var(--cp-accent); font-size: clamp(.32rem, .66cqw, .5rem); font-style: normal; font-weight: 800; }
.hd-sigrow-head em:first-of-type { margin-left: auto; }
.hd-sigrow-head em.is-ghost { border-color: var(--cp-border); background: transparent; color: var(--cp-text-muted); }
.hd-sigrow-cards { display: grid; grid-template-columns: 1fr 1fr; gap: .7cqw; margin-top: .8cqw; }
.hd-sigrow-cards > div { --hm-tone: var(--cp-accent); position: relative; display: flex; align-items: flex-start; gap: .7cqw; min-width: 0; padding: .7cqw .9cqw; border: 1px solid var(--cp-border); border-left: .3cqw solid var(--hm-tone); border-radius: .9cqw; background: var(--cp-surface); }
.hd-sigrow-cards > div.sig-crit { --hm-tone: #dc2626; } .hd-sigrow-cards > div.sig-warn { --hm-tone: #d97706; }
.hd-sigrow-cards > div > i:first-child { flex: none; display: grid; place-items: center; width: max(2.2cqw, 1.2rem); height: max(2.2cqw, 1.2rem); border-radius: 50%; background: color-mix(in srgb, var(--hm-tone) 14%, var(--cp-surface)); color: var(--hm-tone); font-size: max(1.15cqw, .62rem); }
.hd-sigrow-cards > div > div { min-width: 0; flex: 1 1 auto; }
.hd-sigrow-cards > div > div > b { display: block; color: var(--cp-text); font-size: clamp(.38rem, .8cqw, .58rem); font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hd-sigrow-cards > div > div > span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: var(--cp-text-muted); font-size: clamp(.32rem, .66cqw, .5rem); line-height: 1.35; }
.hd-sigrow-cards > div > div > span strong { color: var(--cp-text); }
.hd-sigrow-cards > div > div > u { display: inline-flex; align-items: center; gap: .3cqw; margin-top: .3cqw; padding: .08cqw .5cqw; border-radius: 999px; background: color-mix(in srgb, var(--cp-text) 7%, transparent); color: var(--cp-text-muted); font-size: clamp(.28rem, .58cqw, .44rem); font-weight: 700; text-decoration: none; }
.hd-sig-more { align-self: center; color: var(--cp-text-muted); font-size: 1.2cqw; }
.hd-sigrow-cards .is-1 { animation-name: hd-sig-in-1; } .hd-sigrow-cards .is-2 { animation-name: hd-sig-in-2; } .hd-sigrow-cards .is-3 { animation-name: hd-sig-in-3; } .hd-sigrow-cards .is-4 { animation-name: hd-sig-in-4; }
.hd-sigrow-foot { display: flex; justify-content: space-between; align-items: center; gap: .6cqw; margin-top: .7cqw; padding-top: .6cqw; border-top: 1px solid var(--cp-border); color: var(--cp-accent); font-size: clamp(.32rem, .68cqw, .5rem); font-weight: 700; }
.hd-sigrow-foot span { display: inline-flex; align-items: center; gap: .3cqw; }
.hd-sigrow-foot .is-end { margin-left: .6cqw; }
/* The pointer lives inside the Concentrated Position card, so the tap lands wherever the card lays out. */
.hd-pointer-signal { left: 42%; top: 38%; right: auto; bottom: auto; font-size: 3.2cqw; animation-name: hd-pointer-signal; }

/* ---- Charts ---- */
.hd-charts { display: grid; grid-template-columns: 1fr 1.9fr; gap: 1cqw; }
.hd-donut-card, .hd-flow-card { min-width: 0; padding: 1cqw 1.2cqw 1.1cqw; border: 1px solid var(--cp-border); border-radius: 1.2cqw; background: var(--cp-surface); }
.hd-donut-card > b, .hd-flow-card > b { display: block; color: var(--cp-text); font-size: clamp(.44rem, .95cqw, .66rem); font-weight: 800; }
.hd-donut-wrap { display: grid; grid-template-columns: max(9.5cqw, 5rem) 1fr; align-items: center; gap: 1.2cqw; margin-top: .8cqw; }
.hd-donut-wrap svg { display: block; width: max(9.5cqw, 5rem); height: max(9.5cqw, 5rem); transform: rotate(-90deg); }
.hd-donut-wrap circle { fill: none; stroke-width: 18; }
.hd-donut-wrap .is-track { stroke: color-mix(in srgb, var(--cp-text) 8%, transparent); }
.hd-donut-wrap .is-1 { stroke: #a78bfa; stroke-dasharray: 144 999; animation-name: hd-donut-1; }
.hd-donut-wrap .is-2 { stroke: #f2c14e; stroke-dasharray: 41 999; stroke-dashoffset: -144; animation-name: hd-donut-2; }
.hd-donut-wrap .is-3 { stroke: #3cb4d3; stroke-dasharray: 33 999; stroke-dashoffset: -185; animation-name: hd-donut-3; }
.hd-donut-wrap .is-4 { stroke: #7fd35f; stroke-dasharray: 25 999; stroke-dashoffset: -218; animation-name: hd-donut-4; }
.hd-donut-wrap .is-5 { stroke: #f472b6; stroke-dasharray: 33 999; stroke-dashoffset: -243; animation-name: hd-donut-5; }
.hd-legend { display: grid; gap: .3cqw; color: var(--cp-text-muted); font-size: clamp(.32rem, .68cqw, .5rem); font-weight: 700; }
.hd-legend span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hd-legend b { display: inline-block; width: .8cqw; height: .8cqw; margin-right: .5cqw; border-radius: 50%; vertical-align: -1px; }
.hd-legend .is-1 { background: #a78bfa; } .hd-legend .is-2 { background: #f2c14e; } .hd-legend .is-3 { background: #3cb4d3; } .hd-legend .is-4 { background: #7fd35f; } .hd-legend .is-5 { background: #f472b6; }
.hd-flow-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .8cqw; margin-top: .7cqw; }
.hd-flow-kpis span { min-width: 0; }
.hd-flow-kpis small { display: block; color: var(--cp-text-muted); font-size: clamp(.3rem, .62cqw, .46rem); font-weight: 800; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hd-flow-kpis b { display: block; color: var(--cp-text); font-size: clamp(.44rem, .95cqw, .66rem); font-weight: 800; }
.hd-bars { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1.4cqw; align-items: end; height: max(8.4cqw, 4.5rem); margin-top: .9cqw; padding: 0 .6cqw; border-bottom: 1px solid color-mix(in srgb, var(--cp-text) 14%, transparent); }
.hd-bars > div { position: relative; display: grid; align-items: end; height: 100%; }
.hd-bars i { grid-area: 1 / 1; display: block; width: 70%; height: var(--h); margin: 0 auto; border-radius: .3cqw .3cqw 0 0; transform-origin: bottom; }
.hd-bars .is-out { background: #4f6df5; }
.hd-bars .is-in { background: #c7d2fe; }
[data-bs-theme="dark"] .hd-bars .is-in { background: #dfe3fb; }
.hd-bars small { position: absolute; left: -.7cqw; right: -.7cqw; bottom: -1.9cqw; color: var(--cp-text-muted); font-size: clamp(.28rem, .58cqw, .44rem); font-weight: 700; text-align: center; white-space: nowrap; }
.hd-bars .is-1 i { animation-name: hd-bar-1; } .hd-bars .is-2 i { animation-name: hd-bar-2; } .hd-bars .is-3 i { animation-name: hd-bar-3; } .hd-bars .is-4 i { animation-name: hd-bar-4; } .hd-bars .is-5 i { animation-name: hd-bar-5; }
.hd-bars-legend { display: flex; justify-content: center; gap: 1.2cqw; margin-top: 2.3cqw; color: var(--cp-text-muted); font-size: clamp(.3rem, .62cqw, .46rem); font-weight: 700; }
.hd-bars-legend b { display: inline-block; width: .8cqw; height: .8cqw; margin-right: .35cqw; border-radius: .2cqw; vertical-align: -1px; }
.hd-bars-legend .is-in { background: #c7d2fe; } .hd-bars-legend .is-out { background: #4f6df5; }
.hm-pill-dash { left: 2.2%; right: auto; bottom: 2.4%; z-index: 4; padding: 1cqw 1.6cqw; font-size: clamp(.56rem, 1.5cqw, .76rem); animation-name: hd-pill-dash; }

/* ---- The investment-alert sheet ---- */
.hd-sheet-scrim { position: absolute; inset: 0; z-index: 6; display: block; background: rgba(12, 14, 30, .42); opacity: 0; animation-name: hd-scrim; }
.hd-sheet { position: absolute; left: 6%; right: 6%; bottom: 0; z-index: 7; display: flex; flex-direction: column; gap: .8cqw; max-height: 88%; overflow: hidden; padding: .9cqw 1.6cqw 1.3cqw; border: 1px solid var(--cp-border); border-bottom: 0; border-radius: 1.6cqw 1.6cqw 0 0; background: var(--hd-sheet); box-shadow: 0 -18px 50px -20px rgba(12, 14, 30, .55); transform: translateY(104%); animation-name: hd-sheet; }
.hd-sheet-handle { display: block; width: 6cqw; height: .45cqw; margin: 0 auto; border-radius: 999px; background: color-mix(in srgb, var(--cp-text) 22%, transparent); }
.hd-sheet-head { display: flex; align-items: center; gap: .9cqw; }
.hd-sheet-icon { flex: none; display: grid; place-items: center; width: max(2.8cqw, 1.5rem); height: max(2.8cqw, 1.5rem); border-radius: .8cqw; background: rgba(22, 163, 74, .14); color: #16a34a; font-size: max(1.4cqw, .8rem); }
.hd-sheet-head > div { flex: 1 1 auto; min-width: 0; }
.hd-sheet-head small { display: block; color: var(--cp-accent); font-size: clamp(.34rem, .7cqw, .52rem); font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.hd-sheet-head b { display: block; color: var(--cp-text); font-size: clamp(.56rem, 1.3cqw, .9rem); font-weight: 800; letter-spacing: -.01em; line-height: 1.15; }
.hd-sheet-head u { display: block; margin-top: .15cqw; color: var(--cp-text-muted); font-size: clamp(.32rem, .66cqw, .5rem); text-decoration: none; }
.hd-sheet-btn { flex: none; display: grid; place-items: center; width: max(2.6cqw, 1.4rem); height: max(2.6cqw, 1.4rem); border-radius: .8cqw; background: color-mix(in srgb, var(--cp-text) 7%, transparent); color: var(--cp-text); font-size: max(1.4cqw, .8rem); }
.hd-sheet-body { display: grid; grid-template-columns: 1.25fr 1fr; gap: 1.4cqw; min-height: 0; }
.hd-sheet-main p { margin: 0 0 .6cqw; color: var(--cp-text-muted); font-size: clamp(.36rem, .74cqw, .56rem); line-height: 1.45; }
.hd-sheet-main p b, .hd-sheet-main li b { color: var(--cp-text); font-weight: 800; }
.hd-sheet-main h4, .hd-sheet-snap h4 { display: flex; align-items: center; gap: .4cqw; margin: .5cqw 0 .4cqw; color: var(--cp-text); font-size: clamp(.4rem, .82cqw, .6rem); font-weight: 800; }
.hd-sheet-main h4 i { color: var(--cp-accent); font-size: 1.15em; }
.hd-sheet-main ul { display: grid; gap: .4cqw; margin: 0; padding: 0 0 0 1.1cqw; color: var(--cp-text-muted); font-size: clamp(.34rem, .7cqw, .54rem); line-height: 1.4; }
.hd-sheet-main li::marker { color: var(--cp-accent); }
.hd-sheet-snap { display: grid; align-content: start; gap: .35cqw; }
.hd-sheet-snap h4 { margin: 0 0 .1cqw; }
.hd-sheet-snap > div { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .6cqw; padding: .38cqw .8cqw; border-radius: .7cqw; background: var(--hd-row); }
.hd-sheet-snap > div > i { color: var(--cp-text-muted); font-size: .95cqw; }
.hd-sheet-snap span { color: var(--cp-text-muted); font-size: clamp(.32rem, .68cqw, .5rem); }
.hd-sheet-snap b { color: var(--cp-text); font-size: clamp(.34rem, .7cqw, .52rem); font-weight: 800; white-space: nowrap; }
.hd-sheet-actions { display: grid; grid-template-columns: 1fr auto; gap: .8cqw; }
.hd-sheet-actions span { display: grid; place-items: center; padding: .7cqw 1.4cqw; border-radius: .9cqw; font-size: clamp(.36rem, .74cqw, .56rem); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.hd-sheet-actions .is-outline { border: .18cqw solid var(--cp-text); color: var(--cp-text); }
.hd-sheet-actions .is-solid { background: #4b5266; color: #fff; }
/* The tapped card presses in under the pointer. */
.hd-sigrow-cards .hd-sig-target { animation-name: hd-sig-in-4, hd-sig-press; }

/* ---- Journeys (percent of the 26 s loop) ---- */
@keyframes hd-fade-early { 0%, 4% { opacity: 0; } 17%, 100% { opacity: .16; } }
@keyframes hd-draw-early { 0%, 3% { clip-path: inset(-4px 100% -4px -4px); } 17%, 100% { clip-path: inset(-4px -4px -4px -4px); } }
@keyframes hd-fade-mid { 0%, 9% { opacity: 0; } 22%, 100% { opacity: .22; } }
@keyframes hd-draw-liab { 0%, 8% { clip-path: inset(-4px 100% -4px -4px); } 20%, 100% { clip-path: inset(-4px -4px -4px -4px); } }
@keyframes hd-draw-inv { 0%, 10% { clip-path: inset(-4px 100% -4px -4px); } 22%, 100% { clip-path: inset(-4px -4px -4px -4px); } }
@keyframes hd-gauge { 0%, 8% { --hm-g: 0; } 16%, 100% { --hm-g: 47; } }
@keyframes hd-card-in-1 { 0%, 2% { opacity: 0; transform: translateY(6px); } 7%, 100% { opacity: 1; transform: none; } }
@keyframes hd-card-in-2 { 0%, 4% { opacity: 0; transform: translateY(6px); } 9%, 100% { opacity: 1; transform: none; } }
@keyframes hd-card-in-3 { 0%, 6% { opacity: 0; transform: translateY(6px); } 11%, 100% { opacity: 1; transform: none; } }
@keyframes hd-card-in-4 { 0%, 8% { opacity: 0; transform: translateY(6px); } 13%, 100% { opacity: 1; transform: none; } }
@keyframes hd-rise-a { 0%, 9% { opacity: 0; transform: translateY(5px); } 12%, 100% { opacity: 1; transform: none; } }
@keyframes hd-rise-b { 0%, 10% { opacity: 0; transform: translateY(5px); } 13%, 100% { opacity: 1; transform: none; } }
@keyframes hd-rise-c { 0%, 11% { opacity: 0; transform: translateY(5px); } 14%, 100% { opacity: 1; transform: none; } }
@keyframes hd-rise-d { 0%, 12% { opacity: 0; transform: translateY(5px); } 15%, 100% { opacity: 1; transform: none; } }
@keyframes hd-rise-e { 0%, 13% { opacity: 0; transform: translateY(5px); } 16%, 100% { opacity: 1; transform: none; } }
@keyframes hd-rise-f { 0%, 18% { opacity: 0; transform: translateY(5px); } 21%, 100% { opacity: 1; transform: none; } }
@keyframes hd-rise-g { 0%, 20% { opacity: 0; transform: translateY(5px); } 23%, 100% { opacity: 1; transform: none; } }
@keyframes hd-bar-grow-you { 0%, 14% { transform: scaleX(0); } 20%, 100% { transform: scaleX(1); } }
@keyframes hd-bar-grow-partner { 0%, 17% { transform: scaleX(0); } 21%, 100% { transform: scaleX(1); } }
@keyframes hd-sig-in-1 { 0%, 16% { opacity: 0; transform: translateX(-10px); } 20%, 100% { opacity: 1; transform: none; } }
@keyframes hd-sig-in-2 { 0%, 18% { opacity: 0; transform: translateX(-10px); } 22%, 100% { opacity: 1; transform: none; } }
@keyframes hd-sig-in-3 { 0%, 20% { opacity: 0; transform: translateX(-10px); } 24%, 100% { opacity: 1; transform: none; } }
@keyframes hd-sig-in-4 { 0%, 22% { opacity: 0; transform: translateX(-10px); } 26%, 100% { opacity: 1; transform: none; } }
@keyframes hd-sig-press { 0%, 43.5% { box-shadow: none; background: var(--cp-surface); } 44.5%, 47% { box-shadow: 0 0 0 .35cqw color-mix(in srgb, var(--cp-accent) 35%, transparent); background: var(--cp-accent-soft); } 49%, 100% { box-shadow: none; background: var(--cp-surface); } }
@keyframes hd-donut-1 { 0%, 24% { stroke-dasharray: 0 999; } 32%, 100% { stroke-dasharray: 144 999; } }
@keyframes hd-donut-2 { 0%, 30% { stroke-dasharray: 0 999; } 35%, 100% { stroke-dasharray: 41 999; } }
@keyframes hd-donut-3 { 0%, 33% { stroke-dasharray: 0 999; } 37%, 100% { stroke-dasharray: 33 999; } }
@keyframes hd-donut-4 { 0%, 35% { stroke-dasharray: 0 999; } 38%, 100% { stroke-dasharray: 25 999; } }
@keyframes hd-donut-5 { 0%, 37% { stroke-dasharray: 0 999; } 40%, 100% { stroke-dasharray: 33 999; } }
@keyframes hd-bar-1 { 0%, 25% { transform: scaleY(0); } 31%, 100% { transform: scaleY(1); } }
@keyframes hd-bar-2 { 0%, 27% { transform: scaleY(0); } 33%, 100% { transform: scaleY(1); } }
@keyframes hd-bar-3 { 0%, 29% { transform: scaleY(0); } 35%, 100% { transform: scaleY(1); } }
@keyframes hd-bar-4 { 0%, 31% { transform: scaleY(0); } 37%, 100% { transform: scaleY(1); } }
@keyframes hd-bar-5 { 0%, 33% { transform: scaleY(0); } 39%, 100% { transform: scaleY(1); } }
@keyframes hd-pointer-signal { 0%, 38% { opacity: 0; transform: translate(26cqw, 18cqw); } 40% { opacity: 1; } 43.5% { transform: translate(0, 0) scale(1); } 44.5% { transform: translate(0, 0) scale(.78); } 45.5%, 47% { opacity: 1; transform: translate(0, 0) scale(1); } 49%, 100% { opacity: 0; transform: translate(0, 0) scale(1); } }
@keyframes hd-pill-dash { 0%, 45% { opacity: 1; } 49%, 72% { opacity: 0; } 76%, 100% { opacity: 1; } }
@keyframes hd-scrim { 0%, 45% { opacity: 0; } 49%, 72% { opacity: 1; } 76%, 100% { opacity: 0; } }
@keyframes hd-sheet { 0%, 45.5% { transform: translateY(104%); } 50%, 72% { transform: translateY(0); } 76%, 100% { transform: translateY(104%); } }

@media (max-width: 767.98px) {
    .hd-dash-top { grid-template-columns: 1fr; }
    .hd-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .hd-cards4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .hd-sigrow-cards { grid-template-columns: 1fr; }
    .hd-charts { grid-template-columns: 1fr; }
    .hd-sheet { left: 2%; right: 2%; }
    .hd-sheet-body { grid-template-columns: 1fr; }
    .hd-sheet-snap { display: none; }
    .hm-pill-dash { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .hm-dash-stage *, .hm-dash-stage *::before, .hm-dash-stage *::after, .hd-bills-track { animation: none !important; }
    .hd-pointer-signal, .hd-sheet-scrim, .hd-sheet { display: none; }
    .hd-bills-track { transform: translateX(-25%); }
}