/* Dashboard: a screen to leave open. Everything moves slowly and quietly; prefers-reduced-motion stops it. */
.screen[data-screen=dash] .inner{max-width:1240px}
.dash{position:relative;transition:translate 4s ease-in-out}
.dash-sky{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:0}
.dash-sky span{position:absolute;left:calc(var(--i) * 12.5% + 2%);bottom:-80px;width:44px;height:44px;opacity:.16;animation:dash-rise calc(22s + var(--i) * 3s) linear infinite;animation-delay:calc(var(--i) * -4.3s)}
.dash-sky .emo{width:100%;height:100%}
@keyframes dash-rise{0%{transform:translate(0,0) rotate(0)}50%{transform:translate(24px,-55vh) rotate(160deg)}100%{transform:translate(-12px,-115vh) rotate(320deg)}}
.dash>*:not(.dash-sky){position:relative;z-index:1}

.dash-top{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin:4px 0 14px;flex-wrap:wrap}
.dash-clock b{display:block;font-size:clamp(48px,9vw,88px);line-height:1;font-weight:800;letter-spacing:-.02em}
.dash-clock .colon{font-style:normal;animation:dash-blink 2s steps(1) infinite}
@keyframes dash-blink{50%{opacity:.25}}
.dash-clock span{color:var(--muted);font-size:16px}
.dash-acts{display:flex;gap:8px}

.dash-grid{display:grid;gap:14px;grid-template-columns:1fr}
.dash .card{margin:0}
.dash-hero{position:relative;overflow:hidden;padding:18px}
.dash-aurora{position:absolute;inset:-40%;background:conic-gradient(from 0deg,color-mix(in srgb,var(--primary) 26%,transparent),transparent 30%,color-mix(in srgb,#5B8DEF 22%,transparent) 55%,transparent 75%,color-mix(in srgb,var(--primary) 26%,transparent));filter:blur(40px);animation:dash-spin 24s linear infinite;opacity:.8;pointer-events:none}
.dash-hero>*:not(.dash-aurora){position:relative}
.dash-hero .big{font-size:clamp(40px,7vw,64px);font-weight:800;margin:2px 0 12px}
.dash-hero .big.neg{color:var(--deficit)}
.dash-hi{display:flex;align-items:center;gap:8px;font-weight:700;margin-bottom:8px}
.dash-mascot .emo{width:36px;height:36px;animation:dash-bob 3.2s ease-in-out infinite}
@keyframes dash-bob{50%{transform:translateY(-6px) rotate(-6deg)}}
@keyframes dash-spin{to{transform:rotate(360deg)}}
.dash-meter{margin-top:8px}
.dash-meter div{display:flex;justify-content:space-between;font-size:13px;color:var(--muted);margin-bottom:4px}
.dash-meter div b{color:var(--ink)}
.dash-meter i{display:block;height:10px;border-radius:999px;background:var(--sunken);overflow:hidden}
.dash-meter em{display:block;height:100%;width:0;border-radius:inherit;background:#5B8DEF;transition:width 1.6s cubic-bezier(.2,0,0,1);position:relative;overflow:hidden}
.dash-meter i.spend em{background:var(--primary)}
.dash-meter i.over em{background:var(--deficit)}
.dash-meter em::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent);transform:translateX(-100%);animation:dash-shine 3.5s ease-in-out infinite}
@keyframes dash-shine{60%,100%{transform:translateX(100%)}}

.dash-spot{position:relative;min-height:150px;display:flex;flex-direction:column;justify-content:center;overflow:hidden}
.dash-spotin{display:flex;align-items:center;gap:16px;animation:dash-in .6s cubic-bezier(.2,0,0,1)}
.dash-spotin .lbl{display:block}
.dash-spotin b{display:block;font-size:clamp(28px,4.5vw,40px);font-weight:800;line-height:1.15}
.dash-spotin small{color:var(--muted);font-size:14px}
.dash-spotemo{width:64px;height:64px;flex:none;animation:dash-bob 3s ease-in-out infinite}
@keyframes dash-in{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}
.dash-dots{display:flex;gap:6px;margin-top:14px}
.dash-dots i{width:6px;height:6px;border-radius:999px;background:var(--border);transition:width .3s,background-color .3s}
.dash-dots i.on{width:18px;background:var(--primary)}
.dash-prog{position:absolute;left:0;bottom:0;height:3px;background:var(--primary);width:100%;transform-origin:left;animation:dash-prog var(--ms) linear forwards}
@keyframes dash-prog{from{transform:scaleX(0)}to{transform:scaleX(1)}}

.dash-ringwrap{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.dash-donut{position:relative;width:170px;height:170px;flex:none}
.dash-donut .ring{position:absolute;inset:0;border-radius:50%;-webkit-mask:radial-gradient(circle,transparent 56%,#000 57%);mask:radial-gradient(circle,transparent 56%,#000 57%);animation:dash-spin 60s linear infinite}
.dash-donut span{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:13px;color:var(--muted)}
.dash-donut span b{font-size:20px;color:var(--ink)}
.dash-ringwrap .legend{flex:1;min-width:150px;display:flex;flex-direction:column;gap:6px;font-size:14px}
.dash-ringwrap .legend div{display:flex;align-items:center;gap:8px}
.dash-ringwrap .legend i{width:10px;height:10px;border-radius:3px;flex:none}
.dash-ringwrap .legend .ln{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.dash-feedlist{display:flex;flex-direction:column;gap:2px;overflow:hidden}
.dash-row{display:flex;align-items:center;gap:10px;padding:8px 2px;border-bottom:1px solid var(--border)}
.dash-row:last-child{border-bottom:0}
.dash-row .emo{width:32px;height:32px;flex:none}
.dash-row .t{flex:1;min-width:0;display:flex;flex-direction:column}
.dash-row .t b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dash-row .t span{font-size:12px;color:var(--muted)}
.dash-row.in .amt{color:var(--income)}
.dash-row.enter{animation:dash-feed .7s cubic-bezier(.2,0,0,1)}
@keyframes dash-feed{from{opacity:0;transform:translateY(-100%);background:color-mix(in srgb,var(--primary) 18%,transparent)}to{opacity:1;transform:none;background:transparent}}

.dash-ticker{margin:14px 0 8px;overflow:hidden;border-radius:999px;background:var(--card, var(--sunken));-webkit-mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.dash-track{display:flex;gap:28px;width:max-content;padding:10px 0;animation:dash-marquee var(--dur,40s) linear infinite}
.dash-ticker:hover .dash-track{animation-play-state:paused}
@keyframes dash-marquee{to{transform:translateX(-50%)}}
.dash-tick{display:inline-flex;align-items:center;gap:8px;white-space:nowrap;font-size:15px}
.dash-tick .emo{width:22px;height:22px}
.dash-tick em{font-style:normal;font-weight:700}
.dash-tick em.neg{color:var(--deficit)}

@media (min-width:900px){
  .dash-grid{grid-template-columns:1.1fr 1fr;grid-template-areas:"hero spot" "tips spot" "ring chart" "feed chart"}
  .dash-hero{grid-area:hero}.dash-spot{grid-area:spot}.dash-tips{grid-area:tips}.dash-ring{grid-area:ring}.dash-feed{grid-area:feed}.dash-chart{grid-area:chart}
}

/* full screen for leaving it on: no menus, a little bigger */
body.dash-full #side,body.dash-full #tabbar,body.dash-full .screen[data-screen=dash] .navbar{display:none}
body.dash-full #stage{left:0!important}
body.dash-full .screen[data-screen=dash] .content{padding-top:12px}

@media (prefers-reduced-motion:reduce){
  .dash *,.dash *::after{animation:none!important;transition:none!important}
  .dash-sky{display:none}
}
.dash-trio{border:0;padding:0;margin:0 0 6px}
.dash-trio .neg{color:var(--deficit)}
.dash-trio .pos{color:var(--income)}

/* period card: tabs, big figure, compare chip, category bars that grow in */
.dash-spot{justify-content:flex-start;padding:14px 16px 18px}
.dash-ptabs{display:flex;gap:4px;background:var(--sunken);border-radius:999px;padding:4px;margin-bottom:12px}
.dash-ptabs button{flex:1;border:0;background:transparent;font:inherit;font-size:14px;color:var(--muted);border-radius:999px;padding:7px 4px;min-height:36px;cursor:pointer;transition:background-color .3s,color .3s}
.dash-ptabs button.on{background:color-mix(in srgb,var(--primary) 24%,transparent);color:var(--ink);font-weight:700}
.dash-pin{cursor:pointer;animation:dash-in .6s cubic-bezier(.2,0,0,1)}
.dash-pmain{display:flex;flex-direction:column;gap:2px;margin-bottom:12px}
.dash-pmain .big2{font-size:clamp(34px,5vw,48px);font-weight:800;line-height:1.1}
.dash-cmp{align-self:flex-start;font-size:13px;font-weight:700;border-radius:999px;padding:3px 10px;margin:4px 0 2px}
.dash-cmp.up{background:color-mix(in srgb,var(--deficit) 15%,transparent);color:var(--deficit)}
.dash-cmp.down{background:color-mix(in srgb,var(--income) 15%,transparent);color:var(--income)}
.dash-pbars{display:flex;flex-direction:column;gap:6px}
.dash-pbar{display:flex;align-items:center;gap:10px;width:100%;border:0;background:transparent;font:inherit;color:var(--ink);text-align:left;padding:6px 4px;border-radius:12px;cursor:pointer;min-height:44px}
.dash-pbar:hover{background:var(--sunken)}
.dash-pbar .emo{width:30px;height:30px;flex:none}
.dash-pbar .t{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px;font-size:14px}
.dash-pbar .t i{display:block;height:8px;border-radius:999px;background:var(--sunken);overflow:hidden}
.dash-pbar .t em{display:block;height:100%;width:var(--w);border-radius:inherit;background:linear-gradient(90deg,var(--primary),#5B8DEF);transform-origin:left;animation:dash-grow 1s cubic-bezier(.2,0,0,1) var(--d) backwards}
@keyframes dash-grow{from{transform:scaleX(0)}}
.dash-more{display:block;margin-top:8px;font-size:13px;color:var(--primary);font-weight:700}

/* advice card */
.dash-tips{position:relative;overflow:hidden}
.dash-tip{display:flex;gap:14px;align-items:flex-start;padding:12px;border-radius:16px;cursor:pointer;animation:dash-in .6s cubic-bezier(.2,0,0,1);background:var(--sunken)}
.dash-tip.warn{background:color-mix(in srgb,var(--deficit) 12%,transparent)}
.dash-tip.good{background:color-mix(in srgb,var(--income) 12%,transparent)}
.dash-tipemo{width:52px;height:52px;flex:none;animation:dash-bob 3s ease-in-out infinite}
.dash-tip b{display:block;font-size:17px;line-height:1.3}
.dash-tip span{display:block;font-size:14px;color:var(--muted);margin-top:2px}
.dash-tip em{display:inline-block;font-style:normal;font-size:13px;font-weight:700;color:var(--primary);margin-top:6px}
.dash-dots i.warn.on{background:var(--deficit)}.dash-dots i.good.on{background:var(--income)}
.dash-alltips{border:0;background:transparent;font:inherit;font-size:13px;color:var(--primary);font-weight:700;padding:8px 0 0;cursor:pointer}

.emo.pk{width:30px;height:30px}