/* Client dashboard rows (home page gallery, after Voice notes). Each row shows
   the same faithful copy of the dashboard's Overview (fictional client, the
   numbers the dashboard's own sample uses), cloned from #dr-dashboard into a
   browser window. A camera frames the whole dashboard, then zooms in on the
   row's feature while a cursor works it, and zooms back out at the end of the
   loop: dashboard-rows.js moves the camera and the cursor with Web Animations
   and sets a few state classes; this sheet draws everything else with
   transform and opacity (colours only for hover and selection feedback).
   Reduced motion shows each row's finished, zoomed-in frame. */
@font-face { font-family: Geist; font-style: normal; font-weight: 100 900; font-display: swap; src: url('/site-assets/fonts/geist-latin-wght-normal.woff2') format('woff2'); }
.dash-chapter {
  --dz-ink: #131c2b; --dz-muted: #5b6b82; --dz-faint: #606f86; --dz-line: #e3e8f0; --dz-page: #f4f6fa;
  --dz-blue: #075cff; --dz-good: #18794e; --dz-bad: #c2361f; --dz-warn: #b26a00; --dz-more: #e4572e; --dz-less: #2a78d6;
  --dz-cat-1: #2a78d6; --dz-cat-2: #d4588a; --dz-cat-3: #008300; --dz-cat-4: #c88500;
  --dr-ease: cubic-bezier(.22, 1, .36, 1);
}
.dash-chapter .eyebrow { color: #075cff; }

/* The section that introduces the dashboard: the promise in two lines, then the rows. */
.dash-section { border-top: 1px solid #e1e9f4; }
.dash-section .section-heading { max-width: 720px; margin: 0 auto 56px; }
.dash-section .section-heading h2 { margin: 18px 0 14px; font-size: clamp(30px, 3.4vw, 44px); line-height: 1.08; letter-spacing: -1.6px; }
.dash-section .section-heading h2 span { display: block; color: #075cff; }
.dash-section .section-heading > p:not(.eyebrow) { max-width: 600px; margin-inline: auto; }
@media (max-width: 800px) { .dash-section .section-heading { margin-bottom: 32px; } }

/* The window sits in the gallery tile like the batch demo, a little wider so
   the zoomed dashboard reads at a comfortable size. */
.feature-story .dash-app { max-width: none; height: auto; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
.feature-story.is-gallery .story-chapter.dash-chapter .story-tile .dash-app { left: 44px; top: 44px; width: min(660px, calc(100% - 88px)); height: auto; border: 0; border-radius: 0; background: none; box-shadow: none; transform: none; }
.feature-story.is-gallery .story-chapter.dash-chapter:nth-child(odd) .story-tile .dash-app { left: auto; right: 44px; }
@media (min-width: 801px) and (max-width: 1099px) { .feature-story.is-gallery .story-chapter.dash-chapter .story-tile .dash-app { left: 28px; top: 40px; width: calc(100% - 56px); } .feature-story.is-gallery .story-chapter.dash-chapter:nth-child(odd) .story-tile .dash-app { right: 28px; } }
@media (max-width: 800px) { .feature-story.is-gallery .story-chapter.dash-chapter .story-tile .dash-app, .feature-story.is-gallery .story-chapter.dash-chapter:nth-child(odd) .story-tile .dash-app { position: relative; left: auto; right: auto; top: auto; width: 100%; max-width: 520px; margin-inline: auto; } }

/* The browser window and the camera's view onto the dashboard. */
.dr-frame { position: relative; overflow: hidden; border: 1px solid #d8e2f0; border-radius: 14px; background: #fff; box-shadow: 0 28px 56px -30px #17345452, 0 2px 6px #1734540f; color: var(--dz-ink); font-family: Geist, Inter, "Segoe UI", sans-serif; }
.dr-bar { display: flex; align-items: center; gap: 10px; height: 32px; padding: 0 12px; border-bottom: 1px solid #e6ebf3; background: #f8fafd; }
.dr-dots { display: inline-flex; gap: 5px; }
.dr-dots i { width: 8px; height: 8px; border-radius: 50%; background: #d7dfeb; }
.dr-url { flex: 0 1 220px; min-width: 0; margin-inline: auto; padding: 4px 10px; overflow: hidden; border-radius: 7px; background: #eef2f8; color: #55647a; font-size: 10.5px; text-align: center; white-space: nowrap; text-overflow: ellipsis; }
.dr-bar em { flex: none; padding: 3px 8px; border-radius: 999px; background: #fff5e4; color: #8a5a0e; font-size: 9.5px; font-style: normal; font-weight: 650; }
.dr-view { position: relative; overflow: hidden; aspect-ratio: 16 / 10.4; background: var(--dz-page); }

/* The dashboard, as the Overview draws it, at its own width; the camera
   scales and moves it (--tx, --ty, --ts) to frame each shot. */
.dz-app { position: absolute; left: 0; top: 0; display: grid; grid-template-columns: 200px minmax(0, 1fr); width: 1180px; min-height: 1500px; background: var(--dz-page); font-size: 13px; line-height: 1.35; transform-origin: 0 0; transform: translate(var(--tx, 0px), var(--ty, 0px)) scale(var(--ts, .5)); }
.dz-app b, .dz-app strong { font-weight: 600; }
.dz-app small { font-size: 11.5px; color: var(--dz-muted); }
.dz-app em { font-style: normal; }
.dz-app ul { margin: 0; padding: 0; list-style: none; }
.dz-app p { margin: 0; }
.dz-app .story-character { display: grid; flex: none; place-items: center; }
.dz-side { display: flex; flex-direction: column; gap: 6px; padding: 16px 10px; border-right: 1px solid var(--dz-line); background: #fff; }
.dz-logo { display: flex; align-items: center; gap: 7px; padding: 0 6px 8px; color: #0b57e3; font-size: 18px; font-weight: 700; letter-spacing: -.4px; }
.dz-logo .story-character { --character-size: 24px; width: 26px; }
.dz-switch { display: flex; align-items: center; gap: 8px; padding: 8px; border: 1px solid var(--dz-line); border-radius: 10px; }
.dz-switch .story-character { --character-size: 22px; width: 24px; }
.dz-switch > span:nth-child(2) { display: grid; min-width: 0; }
.dz-switch b { font-size: 12.5px; white-space: nowrap; }
.dz-switch i { margin-left: auto; color: var(--dz-faint); font-style: normal; }
.dz-nav { display: grid; gap: 2px; margin-top: 8px; }
.dz-nav > span { display: flex; align-items: center; gap: 9px; padding: 7px 8px; border-radius: 8px; color: #2a3547; font-weight: 500; }
.dz-nav > span.is-on { background: #eef1f6; color: var(--dz-ink); font-weight: 600; }
.dz-ico svg { display: block; width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.dz-nav em { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--dz-blue); color: #fff; font-size: 10.5px; font-weight: 700; }
.dz-user { display: flex; align-items: center; gap: 8px; margin-top: 380px; padding: 10px 6px 0; border-top: 1px solid var(--dz-line); }
.dz-user > i { width: 26px; height: 26px; border-radius: 50%; background: linear-gradient(135deg, #8a7bd8, #4f46a5); }
.dz-user > span { display: grid; }
.dz-user b { font-size: 12.5px; }
.dz-main { min-width: 0; }
.dz-top { display: flex; align-items: center; gap: 12px; height: 44px; padding: 0 24px; border-bottom: 1px solid var(--dz-line); background: #fff; color: var(--dz-muted); }
.dz-top i { font-style: normal; color: #b7c1d0; }
.dz-top b { color: var(--dz-ink); font-weight: 500; }
.dz-top em { margin-left: auto; padding: 2px 8px; border: 1px solid #f1d7a6; border-radius: 6px; background: #fff7e8; color: #8a5a0e; font-size: 11.5px; }
.dz-bell { width: 16px; height: 16px; border: 1.5px solid #8d99ab; border-radius: 7px 7px 3px 3px; }
.dz-page { padding: 22px 30px 30px; }
.dz-head { display: flex; align-items: center; gap: 14px; padding-bottom: 18px; border-bottom: 1px solid var(--dz-line); }
.dz-head > .story-character { --character-size: 38px; width: 48px; height: 48px; border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 1px var(--dz-line); }
.dz-title { display: grid; gap: 4px; }
.dz-title > b { font-size: 21px; letter-spacing: -.4px; }
.dz-title small { display: inline-flex; align-items: center; gap: 6px; width: max-content; padding: 2px 8px 2px 3px; border: 1px solid var(--dz-line); border-radius: 999px; background: #fff; color: #2a3547; }
.dz-qb { display: grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: #1f7d15; color: #fff; font-size: 8px; font-weight: 700; }
.dz-title small em { padding: 0 6px; border-radius: 4px; background: #e8f6ed; color: var(--dz-good); font-size: 11px; }
.dz-manage { margin-left: auto; color: var(--dz-blue); font-weight: 600; }
.dz-period { display: flex; align-items: center; gap: 12px; margin: 18px 0 16px; }
.dz-month { display: inline-flex; align-items: center; gap: 10px; padding: 6px 10px; border: 1px solid var(--dz-line); border-radius: 8px; background: #fff; font-weight: 600; }
.dz-month i { color: var(--dz-faint); font-style: normal; }
.dz-month small { color: var(--dz-faint); }
.dz-basis { display: inline-flex; align-items: center; gap: 4px; color: var(--dz-muted); font-size: 12px; }
.dz-basis b, .dz-basis span { padding: 5px 10px; border-radius: 7px; font-size: 13px; }
.dz-basis b { border: 1px solid var(--dz-line); background: #fff; color: var(--dz-ink); }
.dz-basis span { background: #eef1f6; color: #2a3547; }
.dz-updated { display: inline-flex; align-items: center; gap: 12px; margin-left: auto; color: var(--dz-muted); font-size: 12px; }
.dz-updated b { padding: 6px 10px; border: 1px solid var(--dz-line); border-radius: 8px; background: #fff; color: var(--dz-ink); font-size: 13px; }
.dz-grid { display: grid; grid-template-columns: minmax(0, 1fr) 240px; gap: 18px; align-items: start; }
.dz-col, .dz-rail { display: grid; gap: 16px; min-width: 0; }
.dz-card { position: relative; padding: 18px 20px; border: 1px solid var(--dz-line); border-radius: 12px; background: #fff; }
.dz-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.dz-card-head b { font-size: 14px; }
.dz-card-head b em { margin-left: 6px; padding: 0 6px; border-radius: 999px; background: #fff3d6; color: var(--dz-warn); font-size: 11.5px; }

/* At a glance. */
.dz-glance { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--dz-line); border-radius: 12px; background: #fff; }
.dz-glance > div { position: relative; display: grid; gap: 3px; padding: 12px 14px; transition: background-color 160ms var(--dr-ease); }
.dz-glance > div + div { border-left: 1px solid var(--dz-line); }
.dz-glance strong { font-size: 19px; letter-spacing: -.4px; }
.dz-glance > div > span:not(.dz-tip) { display: flex; align-items: center; gap: 5px; color: var(--dz-muted); font-size: 11px; }
.dz-glance i { width: 6px; height: 6px; border-radius: 50%; }
.dz-glance i[data-tone="bad"] { background: var(--dz-bad); }
.dz-glance i[data-tone="warn"] { background: var(--dz-warn); }
.dz-app [data-tone="bad"]:not(i) { color: var(--dz-bad); }
.dz-tip { position: absolute; top: calc(100% + 8px); right: 6px; z-index: 3; display: grid; gap: 3px; width: max-content; padding: 9px 12px; border-radius: 10px; background: #131c2b; color: #c7d3e6; font-size: 11.5px; box-shadow: 0 16px 30px -14px #0f1d33b3; opacity: 0; transform: translateY(-4px); transition: opacity 160ms var(--dr-ease), transform 220ms var(--dr-ease); }
.dz-tip b { color: #fff; font-size: 13px; }
.dr-frame.is-tip [data-target="margin"] { background: #f4f7fd; }
.dr-frame.is-tip .dz-tip { opacity: 1; transform: none; }

/* Close checklist. */
.dz-progress { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; }
.dz-progress > em { padding: 1px 7px; border: 1px solid #c9dafc; border-radius: 6px; background: #eef4ff; color: #1d4fb8; font-size: 11.5px; }
.dz-segs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 3px; }
.dz-segs i { height: 6px; overflow: hidden; border-radius: 3px; background: #e7ecf3; }
.dz-segs i::after { content: ""; display: block; height: 100%; background: var(--dz-blue); transform-origin: 0 50%; transform: scaleX(0); transition: transform 420ms var(--dr-ease); }
.dz-segs i.is-done::after, .dr-frame.is-checked .dz-seg-next::after { transform: none; }
.dz-progress > b { font-weight: 500; }
.dz-app .dz-meta { margin: 8px 0 6px; color: var(--dz-muted); font-size: 11.5px; }
.dz-tasks li { display: flex; align-items: center; gap: 10px; min-height: 38px; padding: 0 6px; border-radius: 8px; transition: background-color 200ms var(--dr-ease); }
.dz-tasks li + li { box-shadow: 0 -1px 0 #edf1f6; }
.dz-tasks li span { flex: 1; min-width: 0; }
.dz-tasks li > em { padding: 1px 7px; border: 1px solid #f3c4bb; border-radius: 6px; background: #fff1ee; color: var(--dz-bad); font-size: 11.5px; }
.dz-mail { width: 14px; height: 10px; border: 1.5px solid #2a78d6; border-radius: 2px; }
.dz-mail[data-tone="bad"] { border-color: var(--dz-bad); }
.dz-box { display: grid; flex: none; place-items: center; width: 15px; height: 15px; border: 1.5px solid #8d9bb0; border-radius: 4px; background: #fff; transition: background-color 160ms var(--dr-ease), border-color 160ms var(--dr-ease); }
.dz-box svg { width: 11px; height: 11px; fill: none; stroke: #fff; stroke-width: 2.3; stroke-linecap: round; stroke-linejoin: round; opacity: 0; transform: scale(.6); transition: opacity 140ms var(--dr-ease), transform 220ms cubic-bezier(.34, 1.56, .64, 1); }
.dr-frame.is-row-next [data-target="next"] { background: #f4f7fd; }
.dr-frame.is-checked [data-target="next"] { background: #f1faf4; }
.dr-frame.is-checked [data-target="next"] .dz-box { border-color: var(--dz-good); background: var(--dz-good); }
.dr-frame.is-checked [data-target="next"] .dz-box svg { opacity: 1; transform: none; }
.dr-frame.is-checked [data-target="next"] span { color: var(--dz-muted); }
.dz-saved { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 999px; background: #e8f6ed; color: var(--dz-good); font-size: 11.5px; font-weight: 600; opacity: 0; transform: translateY(3px); transition: opacity 180ms var(--dr-ease), transform 240ms var(--dr-ease); }
.dz-saved i { width: 6px; height: 6px; border-radius: 50%; background: #3fae68; }
.dr-frame.is-saved .dz-saved { opacity: 1; transform: none; }

/* Needs attention. */
.dz-row { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; align-items: start; gap: 10px; padding: 10px 0; }
.dz-row + .dz-row, .dz-buckets + .dz-row { border-top: 1px solid #edf1f6; }
.dz-row > span { display: grid; gap: 2px; }
.dz-alert, .dz-ok { display: grid; place-items: center; width: 16px; height: 16px; border: 1.5px solid var(--dz-warn); border-radius: 50%; color: var(--dz-warn); font-size: 10px; font-style: normal; font-weight: 700; }
.dz-ok { border-color: var(--dz-good); color: var(--dz-good); }
.dz-aging { display: grid; grid-template-columns: 2.6fr 1.15fr .5fr; gap: 2px; margin: 0 0 8px 28px; }
.dz-aging i { height: 7px; border-radius: 2px; background: #c9861b; }
.dz-aging i:nth-child(2) { background: #dd8a2a; }
.dz-aging i:nth-child(3) { background: #8a4b10; }
.dz-buckets { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 0 0 10px 28px; }
.dz-buckets span { display: grid; gap: 1px; }
/* Overdue invoices open up: the oldest slice of the aging bar names its age and
   amount, and "Show customers" lists who owes what. The list opens in the
   space of the rows below it (they fade as it arrives), so nothing else on the
   page moves: transform and opacity only. */
.dz-aging i[data-target="oldest"] { position: relative; }
/* The tip sits beside the slice, over the younger buckets, so the amount
   owed above the bar stays readable. */
.dz-age-tip { position: absolute; right: calc(100% + 10px); top: 50%; z-index: 3; display: grid; gap: 2px; width: max-content; padding: 7px 10px; border-radius: 9px; background: #131c2b; color: #c7d3e6; font-size: 11px; font-style: normal; line-height: 1.3; box-shadow: 0 14px 26px -14px #0f1d33b3; opacity: 0; transform: translate(6px, -50%); transition: opacity 160ms var(--dr-ease), transform 220ms var(--dr-ease); }
.dz-age-tip b { color: #fff; font-size: 12.5px; }
.dr-frame.is-age .dz-age-tip { opacity: 1; transform: translate(0, -50%); }
.dr-frame.is-age .dz-aging i[data-target="oldest"] { box-shadow: 0 0 0 2px #fff, 0 0 0 3px #8a4b10; }
.dz-more { display: flex; align-items: center; gap: 6px; width: max-content; margin: -2px 0 6px 22px; padding: 5px 8px; border-radius: 8px; color: var(--dz-blue); font-size: 12px; font-weight: 600; transition: background-color 160ms var(--dr-ease); }
.dz-more i { font-style: normal; transition: transform 220ms var(--dr-ease); }
.dr-frame.is-owed-hover .dz-more, .dz-more.is-press { background: #eef3fd; }
.dr-frame.is-owed .dz-more i { transform: rotate(180deg); }
.dz-after { position: relative; min-height: 104px; }
.dz-after > .dz-row { transition: opacity 180ms var(--dr-ease); }
.dz-after > .dz-row:first-child { border-top: 1px solid #edf1f6; }
.dr-frame.is-owed .dz-after > .dz-row { opacity: 0; }
.dz-owed { position: absolute; inset: 0 0 auto 28px; display: grid; gap: 4px; background: #fff; opacity: 0; transform: translateY(-6px); transition: opacity 200ms var(--dr-ease), transform 280ms var(--dr-ease); }
.dr-frame.is-owed .dz-owed { opacity: 1; transform: none; transition-delay: 60ms; }
.dz-owed li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; height: 28px; padding: 0 8px; border-top: 1px solid #edf1f6; border-radius: 6px; transition: background-color 160ms var(--dr-ease); }
.dz-owed li b { color: var(--dz-warn); font-weight: 600; }
.dr-frame.is-owed-row .dz-owed [data-target="owed-first"] { background: #fdf6ea; }
.dz-owed small { padding: 2px 8px 0; font-size: 11px; }

/* Financial overview. */
.dz-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.dz-metric { display: grid; align-content: start; gap: 3px; padding-right: 16px; }
.dz-metric + .dz-metric { padding-left: 16px; border-left: 1px solid var(--dz-line); }
.dz-metric small em { color: var(--dz-faint); }
.dz-metric strong { font-size: 26px; font-weight: 650; letter-spacing: -.8px; }
.dz-metric strong span { color: var(--dz-faint); font-size: 17px; }
.dz-metric > span[data-tone] { font-size: 11.5px; font-weight: 600; }
.dz-metric > span[data-tone] em { margin-left: 4px; color: var(--dz-muted); font-weight: 400; }
.dz-metric > span[data-tone="down"] { color: var(--dz-bad); }
.dz-spark-box { position: relative; display: block; margin-top: 8px; }
.dz-spark { display: block; width: 100%; height: 40px; overflow: visible; }
.dz-spark-line { fill: none; stroke: var(--dz-blue); stroke-width: 2; vector-effect: non-scaling-stroke; }
.dz-spark-line.is-grey { stroke: #7c8798; }
.dz-spark-fill { fill: #075cff14; }
/* The cursor rests on August and September (x / 200, y / 40 of the line). */
.dz-hit { position: absolute; width: 2px; height: 2px; }
.dz-hit[data-target="spark-aug"] { left: 90%; top: 25%; }
.dz-hit[data-target="spark-sep"] { left: 100%; top: 20%; }
.dz-spot { position: absolute; left: 100%; top: 20%; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border: 2px solid #fff; border-radius: 50%; background: var(--dz-blue); box-shadow: 0 0 0 1px #075cff40; }
.dz-spark-tip { position: absolute; right: -6px; top: calc(100% + 12px); z-index: 3; display: grid; padding: 8px 11px; border-radius: 10px; background: #131c2b; color: #c7d3e6; font-size: 11.5px; box-shadow: 0 16px 30px -14px #0f1d33b3; opacity: 0; transform: translateY(-4px); transition: opacity 160ms var(--dr-ease), transform 220ms var(--dr-ease); }
.dz-spark-tip > span { grid-area: 1 / 1; display: grid; gap: 2px; transition: opacity 160ms var(--dr-ease); }
.dz-spark-tip b { color: #fff; font-size: 13px; white-space: nowrap; }
.dz-spark-sep { opacity: 0; }
.dr-frame[data-spark] .dz-spark-tip { opacity: 1; transform: none; }
.dr-frame[data-spark="sep"] .dz-spark-aug { opacity: 0; }
.dr-frame[data-spark="sep"] .dz-spark-sep { opacity: 1; }
.dz-went { margin-top: 18px; }
.dz-sub-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.dz-sub-head b { font-size: 12.5px; }
.dz-sub-head small { display: inline-flex; align-items: center; gap: 5px; }
.dz-sub-head small i { width: 8px; height: 8px; margin-left: 8px; border-radius: 2px; }
.dz-sub-head i.is-exp { background: #747f90; }
.dz-sub-head i.is-net { background: var(--dz-blue); }
.dz-sub-head i.is-more { background: var(--dz-more); }
.dz-sub-head i.is-less { background: var(--dz-less); }
.dz-went-bar { display: grid; grid-template-columns: 71fr 29fr; gap: 3px; }
.dz-went-bar i { height: 9px; border-radius: 3px; background: #747f90; }
.dz-went-bar i + i { background: var(--dz-blue); }
.dz-went-note { display: block; margin-top: 4px; text-align: right; }
.dz-changes { position: relative; margin-top: 18px; }
.dz-change { display: grid; grid-template-columns: minmax(0, 1fr) 150px 100px 62px; align-items: center; gap: 12px; padding: 9px 6px; border-top: 1px solid #edf1f6; border-radius: 8px; transition: background-color 160ms var(--dr-ease); }
.dz-change > span { display: grid; gap: 2px; }
.dz-change strong { display: grid; justify-items: end; }
.dz-change strong small { font-weight: 400; }
.dz-change em { color: #2a3547; font-weight: 500; text-align: right; }
.dz-bar { height: 9px; border-radius: 3px; }
/* One axis a fifth of the way in: spending more grows right of it, less grows left. */
.dz-bar[data-dir="more"] { width: 76%; margin-left: 20%; background: var(--dz-more); }
.dz-bar[data-dir="more"][data-size="s"] { width: 11%; }
.dz-bar[data-dir="less"] { width: 7%; margin-left: 13%; background: var(--dz-less); }
.dr-frame.is-row [data-target="row"] { background: #f4f7fd; }

/* Balance sheet: Cash and bank opens into its accounts. */
.dz-balance-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.dz-crumb { display: grid; color: var(--dz-muted); font-size: 12px; }
.dz-crumb > span { grid-area: 1 / 1; transition: opacity 200ms var(--dr-ease); }
.dz-crumb-cash { opacity: 0; }
.dr-frame.is-cash .dz-crumb-all { opacity: 0; }
.dr-frame.is-cash .dz-crumb-cash { opacity: 1; }
.dz-tabs { display: inline-flex; flex: none; gap: 2px; padding: 3px; border-radius: 9px; background: #eef1f6; }
.dz-tabs > * { padding: 5px 12px; border-radius: 7px; font-size: 12.5px; }
.dz-tabs b { background: #fff; box-shadow: 0 1px 2px #1734541a; }
.dz-donut-row { display: grid; grid-template-columns: 170px minmax(0, 1fr); align-items: center; gap: 26px; }
.dz-donut-wrap { position: relative; display: block; width: 170px; height: 170px; }
.dz-donut { display: block; width: 170px; height: 170px; }
/* The centre labels are HTML over the ring: SVG text faded inside a zoomed layer can fail to repaint. */
.dz-center { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 1px; text-align: center; }
.dz-center b { font-size: 19px; letter-spacing: -.4px; }
.dz-center small { font-size: 11px; }
.dz-ring { fill: none; stroke: #eef2f8; stroke-width: 15; }
.dz-slices { transform-origin: 60px 60px; transform: rotate(-90deg); }
.dz-slices circle { fill: none; stroke-width: 15; stroke: var(--series); transition: opacity 220ms var(--dr-ease); }
.dr-frame.is-cash .dz-slices circle:not([data-color="1"]) { opacity: .2; }
.dz-center-all, .dz-center-cash { transition: opacity 200ms var(--dr-ease); }
.dz-center-cash { opacity: 0; }
.dr-frame.is-cash .dz-center-all { opacity: 0; }
.dr-frame.is-cash .dz-center-cash { opacity: 1; }
.dash-chapter [data-color="1"] { --series: var(--dz-cat-1); }
.dash-chapter [data-color="2"] { --series: var(--dz-cat-2); }
.dash-chapter [data-color="3"] { --series: var(--dz-cat-3); }
.dash-chapter [data-color="4"] { --series: var(--dz-cat-4); }
.dz-legend-stack { display: grid; grid-template-columns: minmax(0, 1fr); min-width: 0; }
.dz-legend, .dz-drill { grid-area: 1 / 1; display: grid; align-content: center; gap: 2px; transition: opacity 220ms var(--dr-ease), transform 320ms var(--dr-ease); }
.dz-legend li, .dz-drill li { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto 40px 12px; align-items: center; gap: 10px; min-height: 42px; padding: 0 8px 0 28px; border-radius: 8px; transition: background-color 160ms var(--dr-ease); }
.dz-legend li::before { content: ""; position: absolute; left: 10px; width: 10px; height: 10px; border-radius: 2px; background: var(--series); }
.dz-drill li:not(.dz-back)::before { content: ""; position: absolute; left: 13px; width: 4px; height: 16px; border-radius: 2px; background: var(--dz-cat-1); }
.dz-legend li > span, .dz-drill li > span { display: grid; gap: 1px; min-width: 0; }
.dz-legend li > span > *, .dz-drill li > span > * { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.dz-legend em, .dz-drill em { color: var(--dz-muted); text-align: right; }
.dz-legend i { color: var(--dz-faint); font-style: normal; }
.dz-drill { opacity: 0; transform: translateX(16px); }
.dz-drill .dz-back { display: block; width: max-content; min-height: 30px; padding: 5px 8px; color: var(--dz-blue); font-weight: 600; }
.dr-frame.is-cash .dz-legend { opacity: 0; transform: translateX(-16px); }
.dr-frame.is-cash .dz-drill { opacity: 1; transform: none; }
.dr-frame.is-hover-cash [data-target="cash"], .dr-frame.is-hover-checking [data-target="checking"] { background: #f1f5fd; }
.dz-ratios { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--dz-line); }
.dz-ratios span { display: grid; gap: 2px; padding-right: 14px; }
.dz-ratios span + span { padding-left: 14px; border-left: 1px solid var(--dz-line); }
.dz-ratios b { font-size: 18px; }
.dz-ratios em { color: var(--dz-muted); font-size: 11.5px; }

/* The right-hand rail. */
.dz-notes p { display: grid; gap: 3px; padding: 8px 0; }
.dz-notes p + p { border-top: 1px solid #edf1f6; }
.dz-tools p { padding: 7px 0; font-weight: 500; }
.dz-tools small { display: block; margin-top: 6px; }

/* The expense review: a side panel that slides in from the window's right
   edge over a dimmed page, as the dashboard's own review does, so the change
   list stays in view beside it. It lives on the window, like the cursor, and
   keeps its size while the camera zooms. */
.dr-view::after { content: ""; position: absolute; inset: 0; z-index: 1; background: #0f1d33; opacity: 0; pointer-events: none; transition: opacity 240ms var(--dr-ease); }
.dr-frame.is-panel .dr-view::after { opacity: .16; }
.dr-panel { position: absolute; z-index: 5; top: 33px; right: 0; bottom: 0; display: flex; flex-direction: column; gap: 11px; width: min(330px, 56%); padding: 14px 14px 0; overflow: hidden; border-left: 1px solid #dfe6f0; border-radius: 12px 0 0 0; background: #fff; box-shadow: -24px 0 48px -26px #1734546b; transform: translateX(105%); transition: transform 240ms cubic-bezier(.4, 0, .9, .6); }
.dr-frame.is-panel .dr-panel { transform: none; transition: transform 380ms cubic-bezier(.32, .72, 0, 1); }
.dr-panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.dr-panel-head > span { display: grid; gap: 2px; min-width: 0; }
.dr-panel-head b { font-size: 15px; font-weight: 600; letter-spacing: -.2px; }
.dr-panel-head small { color: var(--dz-muted); font-size: 10.5px; }
.dr-panel-head i { display: grid; flex: none; place-items: center; width: 24px; height: 24px; border-radius: 7px; background: #f1f4f9; transition: background-color 160ms var(--dr-ease); }
.dr-panel-head i.is-press { background: #e3e9f3; }
.dr-panel-head svg { width: 12px; height: 12px; fill: none; stroke: #5b6b82; stroke-width: 1.8; stroke-linecap: round; }
.dr-panel-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 10px 0; border-block: 1px solid #edf1f6; }
.dr-panel-stats dt { color: var(--dz-muted); font-size: 10px; }
.dr-panel-stats dd { display: grid; margin: 1px 0 0; font-size: 13px; font-weight: 600; letter-spacing: -.2px; }
.dr-panel-stats dd[data-tone="more"] { color: #b9411c; }
.dr-panel-stats dd small { color: var(--dz-muted); font-size: 10px; font-weight: 500; }
.dr-panel-pair { display: grid; gap: 5px; }
.dr-panel-pair span { display: grid; grid-template-columns: 26px minmax(0, 1fr); align-items: center; gap: 6px; }
.dr-panel-pair small { color: var(--dz-muted); font-size: 10px; }
.dr-panel-pair i { height: 7px; border-radius: 3px; background: #c3cfe0; transform-origin: 0 50%; transform: scaleX(0); transition: transform 520ms var(--dr-ease) 220ms; }
.dr-panel-pair span:first-child i { width: 66%; }
.dr-panel-pair span + span i { width: 100%; background: var(--dz-more); transition-delay: 300ms; }
.dr-frame.is-panel .dr-panel-pair i { transform: none; }
.dr-panel-title { display: flex; align-items: baseline; gap: 6px; margin: 2px 0 -4px; color: #2a3547; font-size: 11px; font-weight: 600; }
.dr-panel-title small { color: var(--dz-muted); font-size: 10px; font-weight: 500; }
.dr-panel ul { margin: 0; padding: 0; list-style: none; }
.dr-panel-drivers li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px; height: 27px; padding: 0 6px; border-top: 1px solid #edf1f6; border-radius: 6px; font-size: 11.5px; transition: background-color 160ms var(--dr-ease); }
.dr-panel-drivers b, .dr-panel-list > li > b { font-weight: 600; font-variant-numeric: tabular-nums; }
.dr-frame.is-top .dr-panel-drivers [data-target="top"] { background: #f4f7fd; }
.dr-panel-list li { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 6px 6px 6px 0; border-top: 1px solid #edf1f6; font-size: 11px; }
.dr-panel-list time { color: var(--dz-muted); font-size: 10px; }
.dr-panel-list span { display: grid; gap: 1px; min-width: 0; }
.dr-panel-list span b { overflow: hidden; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
.dr-panel-list small { overflow: hidden; color: var(--dz-muted); font-size: 10px; white-space: nowrap; text-overflow: ellipsis; }

/* The cursor: the same arrow and click ring as the batch demo. It lives on the
   window, not the dashboard, so it keeps its size while the camera zooms. */
.dr-cursor { position: absolute; left: 0; top: 0; z-index: 6; width: 21px; height: 23px; pointer-events: none; opacity: 0; transform: translate(var(--cx, 0px), var(--cy, 0px)); transition: opacity 180ms var(--dr-ease); will-change: transform; }
.dr-cursor svg { display: block; width: 21px; height: 23px; overflow: visible; fill: #1b3354; stroke: #fff; stroke-width: 1.3; stroke-linejoin: round; filter: drop-shadow(0 2px 3px #10182940); transform-origin: 3.2px 2.6px; transition: transform 120ms var(--dr-ease); }
.dr-cursor.is-pressing svg { transform: scale(.88); }
.dr-cursor i { position: absolute; left: -6px; top: -7px; width: 16px; height: 16px; border: 1.5px solid #075cff; border-radius: 50%; opacity: 0; }
.dr-cursor.is-click i { animation: dr-click 380ms var(--dr-ease) both; }
@keyframes dr-click { from { opacity: .9; transform: scale(.4); } to { opacity: 0; transform: scale(1.5); } }
.dr-frame.has-cursor .dr-cursor { opacity: 1; }

@media (max-width: 800px) { .dr-view { aspect-ratio: 4 / 3.3; } .dr-url { flex-basis: 170px; } .dr-panel { width: 86%; } }

@media (prefers-reduced-motion: reduce) {
  .dash-chapter .dr-frame *, .dash-chapter .dr-frame *::before, .dash-chapter .dr-frame *::after { animation: none !important; transition: none !important; }
  .dr-cursor { display: none !important; }
  .dz-tip, .dz-spark-tip, .dz-legend, .dz-drill, .dz-saved, .dz-owed, .dz-more i, .dr-panel-pair i { transform: none !important; }
}