/* Compass — Dashboard page (2026-10-07; rebuilt 2026-10-08 to the Studio design, js/50). Four number tiles, the savings
   chart beside one year's income, then three cards and the history. Theme tokens only. */
@media (min-width:1001px){
  #dashView { grid-column:2 !important; grid-row:2 !important; min-width:0 !important; margin:0 !important;
    padding:28px 34px 54px !important; background:var(--compass-canvas, var(--c-gray-99)) !important; border-radius:0 0 20px 0 !important; }
}
#dashView .hero { background:transparent !important; }
#dashView .hero::after { display:none !important; }
#dashView .dz-card, #dashView .dz-kpi { min-width:0; padding:18px 20px; border:1px solid var(--c-gray-90); border-radius:16px; background:var(--c-gray-99);
  box-shadow:0 1px 2px rgba(var(--c-shadow-rgb), .04), 0 6px 20px -12px rgba(var(--c-shadow-rgb), .12); }
/* chips */
#dashView .dz-chip { flex:none; width:34px; height:34px; border-radius:10px; display:grid; place-items:center; }
#dashView .dz-chip svg { width:18px; height:18px; }
#dashView .dz-c-blue { background:rgba(var(--c-blue-60d-rgb), .11); } #dashView .dz-c-blue svg { stroke:var(--c-blue-60d); }
#dashView .dz-c-green { background:rgba(var(--c-teal-65b-rgb), .13); } #dashView .dz-c-green svg { stroke:var(--c-teal-65b); }
#dashView .dz-c-orange { background:rgba(var(--c-orange-75-rgb), .15); } #dashView .dz-c-orange svg { stroke:var(--c-orange-75); }
#dashView .dz-c-violet { background:rgba(var(--c-purple-65-rgb), .13); } #dashView .dz-c-violet svg { stroke:var(--c-purple-65); }
#dashView .dz-c-teal { background:rgba(var(--c-teal-55b-rgb), .12); } #dashView .dz-c-teal svg { stroke:var(--c-teal-55b); }
#dashView .dz-c-red { background:rgba(var(--c-red-60-rgb), .1); } #dashView .dz-c-red svg { stroke:var(--c-red-60); }
#dashView .dz-c-amber { background:rgba(var(--c-amber-55-rgb), .15); } #dashView .dz-c-amber svg { stroke:var(--c-amber-55); }
#dashView .dz-c-gray { background:var(--c-slate-95b); } #dashView .dz-c-gray svg { stroke:var(--c-slate-65); }
/* number tiles */
#dashView .dz-kpis { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:16px; margin:6px 0 16px; }
#dashView .dz-kh { display:flex; align-items:center; gap:10px; margin-bottom:14px; font-size:13px; font-weight:600; color:var(--c-slate-45); }
#dashView .dz-kh > span:not(.dz-chip) { min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#dashView .dz-kh .qm { margin-left:auto !important; }
#dashView .dz-num { font-size:28px; font-weight:700; letter-spacing:-.6px; line-height:1.1; color:var(--c-slate-25); font-variant-numeric:tabular-nums; }
#dashView .dz-num small { font-size:14px; font-weight:600; letter-spacing:0; color:var(--c-slate-65); }
#dashView .dz-num.dz-wait { font-size:20px; color:var(--c-slate-65); }
#dashView .dz-delta { display:flex; align-items:center; gap:6px; margin-top:10px; font-size:12.5px; color:var(--c-slate-65); white-space:nowrap; }
#dashView .dz-pill { display:inline-flex; align-items:center; padding:2px 8px; border-radius:999px; font-size:12px; font-weight:700; }
#dashView .dz-p-good { background:rgba(var(--c-teal-65b-rgb), .14); color:var(--c-teal-55b); }
#dashView .dz-p-mid { background:rgba(var(--c-amber-55-rgb), .18); color:var(--c-orange-65b); }
#dashView .dz-p-bad { background:rgba(var(--c-red-60-rgb), .1); color:var(--c-red-60); }
#dashView .dz-spark { display:flex; align-items:flex-end; gap:3px; height:34px; margin-top:12px; }
#dashView .dz-spark i { flex:1; border-radius:3px; background:var(--c-slate-95b); }
#dashView .dz-spark i.hi { background:var(--c-blue-60d); }
/* card heads */
#dashView .dz-ch { display:flex; align-items:center; gap:8px; margin-bottom:14px; flex-wrap:wrap; }
#dashView .dz-ch h3 { display:flex; align-items:center; gap:6px; margin:0; font-size:15px; font-weight:700; color:var(--c-slate-25); }
#dashView .dz-r { margin-left:auto; display:flex; gap:8px; align-items:center; }
#dashView .dz-legend { gap:14px; font-size:12.5px; color:var(--c-slate-65); }
#dashView .dz-legend span { display:inline-flex; align-items:center; gap:6px; white-space:nowrap; }
#dashView .dz-legend i { width:9px; height:9px; border-radius:3px; display:inline-block; }
#dashView .dz-l-strong { background:var(--c-teal-65b); } #dashView .dz-l-typ { background:var(--c-blue-60d); } #dashView .dz-l-weak { background:var(--c-orange-75); }
#dashView .dz-seg { display:inline-flex; padding:3px; gap:2px; border-radius:10px; background:var(--c-slate-95b); }
#dashView .dz-seg button { min-height:30px; padding:0 12px; border:0; border-radius:8px; background:transparent; font:inherit; font-size:12.5px; font-weight:600; color:var(--c-slate-45); cursor:pointer; }
#dashView .dz-seg button.on { background:var(--c-gray-99); color:var(--c-slate-25); box-shadow:0 1px 3px rgba(var(--c-shadow-rgb), .12); }
#dashView .dz-btn { display:inline-flex; align-items:center; justify-content:center; gap:6px; min-height:30px; padding:0 12px; border:1px solid var(--c-gray-90); border-radius:8px;
  background:var(--c-gray-99); color:var(--c-slate-45); font:inherit; font-size:12.5px; font-weight:600; cursor:pointer; white-space:nowrap; box-shadow:0 1px 2px rgba(var(--c-shadow-rgb), .05); }
#dashView .dz-btn:hover { border-color:var(--c-slate-80); }
#dashView .dz-link { margin-top:12px; padding:0; border:0; background:none; font:inherit; font-size:13px; font-weight:700; color:var(--c-blue-60d); cursor:pointer; }
#dashView .dz-link:hover { text-decoration:underline; }
/* grids */
#dashView .dz-g2 { display:grid; grid-template-columns:minmax(0, 1.85fr) minmax(0, 1fr); gap:16px; margin-bottom:16px; }
#dashView .dz-g2-even { grid-template-columns:repeat(2, minmax(0, 1fr)); }
#dashView .dz-g3 { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:16px; margin-bottom:16px; }
#dashView .dz-chart { position:relative; height:270px; }
#dashView .dz-g2 > .dz-card:first-child { display:flex; flex-direction:column; }
#dashView .dz-g2 > .dz-card:first-child .dz-chart { flex:1; min-height:270px; }
#dashView .dz-g2-even > .dz-card:only-child { grid-column:1 / -1; }
#dashView .dz-stats { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px; margin-top:12px; }
#dashView .dz-stats > div { padding:12px 14px; border-radius:12px; border:1px solid var(--c-gray-90); background:transparent; }
#dashView .dz-stats span { display:block; font-size:12px; font-weight:600; color:var(--c-slate-45); }
#dashView .dz-stats b { display:block; margin-top:3px; font-size:20px; letter-spacing:-.3px; color:var(--c-slate-25); }
#dashView .dz-stats b.dz-neg { color:var(--c-red-50); }
/* donut + rows */
#dashView .dz-donut { position:relative; display:grid; place-items:center; margin:4px 0 12px; }
#dashView .dz-donut canvas { width:190px !important; height:190px !important; }
#dashView .dz-donut-c { position:absolute; text-align:center; pointer-events:none; }
#dashView .dz-donut-c span { display:block; font-size:12px; color:var(--c-slate-65); }
#dashView .dz-donut-c b { font-size:22px; letter-spacing:-.4px; color:var(--c-slate-25); }
#dashView .dz-rows { display:flex; flex-direction:column; }
#dashView .dz-row { display:flex; align-items:center; gap:10px; padding:10px 0; border-top:1px solid var(--c-gray-90); font-size:13.5px; color:var(--c-slate-35); }
#dashView .dz-row:first-child { border-top:0; }
#dashView .dz-row b { margin-left:auto; font-variant-numeric:tabular-nums; color:var(--c-slate-25); }
#dashView .dz-row em { font-style:normal; color:var(--c-slate-55); font-size:12px; width:38px; text-align:right; }
/* 2026-10-12: the paycheck line that closes the income card; notes wider than a percent (an ACA payback, "a year") */
#dashView .dz-row-total { font-weight:600; color:var(--c-slate-25); border-top:2px solid var(--c-gray-90); }
#dashView .dz-row-total, #dashView .dz-row-note { flex-wrap:wrap; row-gap:2px; }
#dashView .dz-row-total em, #dashView .dz-row-note em { width:100%; text-align:right; font-weight:400; }
#dashView .dz-row-total b, #dashView .dz-row-note b { margin-right:48px; } /* lines up with the amounts that have a percent after them */
#dashView .dz-dot { width:9px; height:9px; border-radius:50%; flex:none; }
#dashView .dz-dot-health { background:var(--c-orange-75); } #dashView .dz-dot-tax { background:var(--c-red-60); }
#dashView .dz-row .dz-chip { width:30px; height:30px; border-radius:9px; } #dashView .dz-row .dz-chip svg { width:15px; height:15px; }
#dashView .dz-age { font-weight:700; width:28px; color:var(--c-slate-25); }
#dashView .dz-age { white-space:nowrap; }
#dashView .dz-ages-wide .dz-row { gap:8px; } #dashView .dz-ages-wide .dz-age { width:46px; }
#dashView .dz-lab { flex:1; min-width:0; display:flex; flex-direction:column; gap:1px; }
#dashView .dz-row .dz-sub { font-size:11.5px; color:var(--c-slate-55); white-space:nowrap; }
#dashView .dz-row.dz-bad { color:var(--c-red-60); }
/* risk + actions */
#dashView .dz-risk { display:flex; gap:12px; align-items:center; padding:12px; border-radius:12px; background:rgba(var(--c-amber-55-rgb), .14); }
#dashView .dz-risk .dz-chip { background:var(--c-gray-99); }
#dashView .dz-risk b { display:block; font-size:13.5px; color:var(--c-slate-25); }
#dashView .dz-risk span { display:block; font-size:12.5px; color:var(--c-slate-45); margin-top:2px; }
#dashView .dz-act { display:flex; align-items:center; gap:12px; padding:12px 0; border-top:1px solid var(--c-gray-90); }
#dashView .dz-ch + .dz-act { border-top:0; padding-top:0; }
#dashView .dz-act > div { min-width:0; }
#dashView .dz-t { font-weight:600; font-size:13.5px; color:var(--c-slate-25); }
#dashView .dz-s { font-size:12.5px; color:var(--c-slate-65); } /* wraps (2026-10-12: "Social Se…") */
#dashView .dz-act .dz-btn { margin-left:auto; }
/* history strip */
#dashView .dz-strip { display:flex; gap:2px; height:22px; margin:12px 0 2px; }
#dashView .dz-strip i { flex:1; border-radius:2px; background:var(--c-blue-60d); }
#dashView .dz-strip i.no { background:var(--c-red-60); }
#dashView .dz-strip i.part { background:rgba(var(--c-blue-60d-rgb), .3); }
#dashView .dz-strip-ax { display:flex; justify-content:space-between; font-size:11px; color:var(--c-slate-55); }
@media (max-width:1100px){
  #dashView .dz-kpis { grid-template-columns:repeat(2, minmax(0, 1fr)); }
  #dashView .dz-g2, #dashView .dz-g3, #dashView .dz-g2-even { grid-template-columns:minmax(0, 1fr); }
}
@media (max-width:700px){
  #dashView .dz-kpis { gap:12px; }
  #dashView .dz-card, #dashView .dz-kpi { padding:14px; }
  #dashView .dz-num { font-size:22px; }
  #dashView .dz-kpi { position:relative; }
  #dashView .dz-kh { gap:8px; margin-bottom:10px; padding-right:14px; }
  #dashView .dz-kh .qm { position:absolute !important; top:12px; right:12px; }
  #dashView .dz-chip { width:30px; height:30px; } #dashView .dz-chip svg { width:16px; height:16px; }
  #dashView .dz-spark { display:none; }
  #dashView .dz-delta { flex-wrap:wrap; white-space:normal; gap:4px 6px; font-size:12px; }
  #dashView .dz-legend { order:3; width:100%; margin-left:0; justify-content:flex-start; flex-wrap:wrap; gap:6px 12px; }
  #dashView .dz-chart { height:230px; }
}

/* 2026-10-14 journey map: one card for the risk and what would fix it; Key ages' column named; taxes and savings as
   subtractions under the income sources (they aren't slices of the ring) */
#dashView .dz-fixcard .dz-risk { margin-bottom:12px; }
#dashView .dz-fixcard .dz-risk > div { flex:1; min-width:0; }
#dashView .dz-fixcard .dz-risk .dz-link { flex:none; margin:0; white-space:nowrap; }
#dashView .dz-ages-h { display:flex; padding:0 0 4px; font-size:11.5px; font-weight:600; color:var(--c-slate-45); }
#dashView .dz-ages-h span { margin-left:40px; }
#dashView .dz-dot-off { background:transparent !important; border:1px dashed var(--c-gray-80); }