/* Projections, simple first screen (js/54, 2026-10-10). Studio variables first (they follow Studio Dark), theme tokens
   as the fallback for the other themes. */
.pjs{display:flex;flex-direction:column;gap:16px;margin-bottom:16px}
.pjs[hidden]{display:none}
.pjs-card{background:var(--s-card,var(--c-gray-99));border:1px solid var(--s-line,var(--c-gray-90));border-radius:16px;padding:18px 20px;min-width:0;color:var(--s-ink,var(--c-slate-15))}
.pjs-h{display:flex;align-items:center;gap:8px;margin-bottom:12px}
.pjs-h h3{margin:0;font-size:15px;font-weight:700;display:flex;align-items:center;gap:6px}
.pjs-h .pjs-legend,.pjs-h .pjs-btn{margin-left:auto}
.pjs-muted{color:var(--s-muted,var(--c-slate-55));font-weight:500}
/* 1. verdict */
.pjs-verdict{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:22px;align-items:center}
.pjs-gauge{width:232px;height:auto;display:block;overflow:visible}
.pjs-gknob{fill:var(--s-card,var(--c-gray-99));stroke-width:5}
.pjs-gtick{stroke:var(--s-ink2,var(--c-slate-35));stroke-width:2.5;stroke-linecap:round}
.pjs-gsafe{fill:var(--s-ink2,var(--c-slate-35));font-size:11px;font-weight:700}
.pjs-gnum{font-size:42px;font-weight:800;letter-spacing:-1.5px;font-variant-numeric:tabular-nums}
.pjs-glab{fill:var(--s-muted,var(--c-slate-55));font-size:12.5px;font-weight:500}
.pjs-gax{fill:var(--s-muted,var(--c-slate-55));font-size:11px}
.pjs-tag{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:999px;font-size:12px;font-weight:700;background:var(--s-red-l,var(--c-gray-95));color:var(--c-red-40)}
.pjs-good .pjs-tag{background:var(--s-green-l,var(--c-gray-95));color:var(--s-green-ink,var(--c-green-35))} .pjs-mid .pjs-tag{background:var(--s-amber-l,var(--c-gray-95));color:var(--c-amber-35)}
.pjs-v h2{margin:8px 0 4px;font-size:22px;letter-spacing:-.4px;line-height:1.25}
.pjs-v p{margin:0;color:var(--s-ink2,var(--c-slate-35));font-size:14px;line-height:1.55}
.pjs-hc{display:flex;gap:8px;align-items:flex-start;margin-top:12px;padding:10px 12px;border-radius:10px;background:var(--s-amber-l,var(--c-gray-95));color:var(--c-amber-35);font-size:13px;line-height:1.5}
.pjs-hc svg{flex:none;margin-top:2px} .pjs-hc a{color:inherit;font-weight:700;white-space:nowrap}
.pjs-who{font-size:12.5px;color:var(--s-muted,var(--c-slate-55));margin-top:8px}
/* buttons */
.pjs-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:36px;padding:0 14px;border-radius:10px;border:1px solid var(--s-line2,var(--c-gray-85));background:var(--s-card,var(--c-gray-99));color:var(--s-ink2,var(--c-slate-35));font:inherit;font-size:13px;font-weight:600;cursor:pointer;white-space:nowrap}
.pjs-btn:hover{border-color:var(--s-blue,var(--c-blue-50));color:var(--s-blue,var(--c-blue-50))}
.pjs-btn-sm{height:30px;font-size:12.5px;padding:0 10px;border-radius:8px}
/* 2 + 3 */
.pjs-g2{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:16px}
#pjsTop,#pjsRest{display:flex;flex-direction:column;gap:16px}
.pjs-chartcard .pjs-full{display:none} .pjs-chartcard.open .pjs-full{display:revert} .pjs-chartcard.open .pjs-less{display:none}
.pjs-chartcard .pjs-h .pjs-legend{margin-left:auto}
/* The page's own chart, inside this card: no second card around it, no second title. In the "studio" layer (the
   first one declared in index.html) so these !important rules outrank Studio's card rules and every theme's. */
@layer studio {
  #pjSimple #pjsFanHost > .fan-chart-shell{margin:0 !important;padding:0 !important;border:0 !important;border-radius:0 !important;box-shadow:none !important;background:none !important;overflow:visible !important}
  #pjSimple #pjsFanHost .fan-chart-head{padding:0 0 8px !important;background:none !important;border:0 !important;justify-content:flex-end;min-height:0}
  #pjSimple #pjsFanHost .fan-chart-title,#pjSimple #pjsFanHost .fan-chart-subtitle{display:none !important}
}
.pjs-foot{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:12px;padding-top:12px;border-top:1px solid var(--s-line,var(--c-gray-90));font-size:12.5px;color:var(--s-muted,var(--c-slate-55))}
.pjs-foot .pjs-btn{margin-left:auto}
.pjs-chart svg{width:100%;height:auto;display:block}
.pjs-g{stroke:var(--s-line,var(--c-gray-90))} .pjs-yl{fill:var(--s-muted,var(--c-slate-55));font-size:11px;text-anchor:end}
.pjs-band{fill:var(--s-seg2,var(--c-blue-85))} .pjs-l50{fill:none;stroke:var(--s-blue,var(--c-blue-50));stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.pjs-ret{stroke:var(--c-amber-55);stroke-dasharray:4 4} .pjs-retl{fill:var(--c-amber-35);font-size:11.5px;font-weight:700}
.pjs-out{fill:var(--s-red,var(--c-red-55))} .pjs-outl{fill:var(--c-red-40);font-size:11.5px;font-weight:700}
.pjs-xl{fill:var(--s-muted,var(--c-slate-55));font-size:11px;text-anchor:middle} .pjs-xl2{fill:var(--s-muted,var(--c-slate-55));font-size:10.5px;text-anchor:middle}
.pjs-legend{display:flex;gap:14px;font-size:12.5px;color:var(--s-muted,var(--c-slate-55))} .pjs-legend span{display:inline-flex;align-items:center;gap:6px}
.pjs-legend i{width:9px;height:9px;border-radius:3px;display:inline-block} .pjs-legend-wrap{flex-wrap:wrap;margin-top:4px}
.pjs-k50{background:var(--s-blue,var(--c-blue-50))} .pjs-kband{background:var(--s-seg2,var(--c-blue-85))}
.pjs-spend{display:flex;flex-direction:column;gap:14px}
.pjs-spend .pjs-h{margin:0}
.pjs-row{display:flex;justify-content:space-between;gap:10px;font-size:13px;color:var(--s-ink2,var(--c-slate-35));margin-bottom:6px}
.pjs-row b{font-size:15px;color:var(--s-ink,var(--c-slate-15));font-variant-numeric:tabular-nums}
.pjs-bar{height:12px;border-radius:999px;background:var(--s-track,var(--c-gray-95));overflow:hidden}
.pjs-bar i{display:block;height:100%;border-radius:999px} .pjs-bar .pjs-bad{background:var(--s-red,var(--c-red-55))} .pjs-bar .pjs-ok{background:var(--s-green,var(--c-green-50))}
.pjs-say{margin:0;padding:12px 14px;border-radius:12px;background:var(--s-soft,var(--c-gray-95));font-size:13px;line-height:1.5}
.pjs-say-bad{background:var(--s-amber-l,var(--c-gray-95));color:var(--c-amber-35)} .pjs-say-good{background:var(--s-green-l,var(--c-gray-95));color:var(--s-green-ink,var(--c-green-35))}
.pjs-wait{margin:0;font-size:13px;color:var(--s-muted,var(--c-slate-55))}
.pjs-spend .pjs-btn{align-self:flex-start}
/* 4 */
.pjs-src{display:flex;flex-direction:column;gap:14px}
.pjs-src .pjs-h{margin:0}
.pjs-src .pjs-row span:first-child{font-weight:600;color:var(--s-ink,var(--c-slate-15))}
.pjs-stack{display:flex;height:30px;border-radius:9px;overflow:hidden;background:var(--s-track,var(--c-gray-95))}
.pjs-stack i{display:grid;place-items:center;color:var(--c-gray-99);font-size:11.5px;font-weight:700;font-style:normal;white-space:nowrap;overflow:hidden;min-width:0}
.pjs-c-ss{background:var(--c-blue-50)} .pjs-c-ss2{background:var(--c-blue-65)} .pjs-c-pen{background:var(--c-amber-50)} .pjs-c-pay{background:var(--c-blue-40)}
.pjs-c-pre{background:var(--c-purple-55)} .pjs-c-brk{background:var(--c-teal-50)} .pjs-c-cash{background:var(--c-amber-55)} .pjs-c-roth{background:var(--c-purple-45)} .pjs-c-hsa{background:var(--c-slate-55)}
/* 5 */
.pjs-fxs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.pjs-fx{border:1px solid var(--s-line,var(--c-gray-90));border-radius:12px;padding:14px 16px;display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.pjs-fx b{font-size:14.5px} .pjs-fx span{font-size:12.5px;color:var(--s-muted,var(--c-slate-55))} .pjs-fx em{font-style:normal;font-weight:700;font-size:13px;color:var(--s-green-ink,var(--c-green-35))}
.pjs-chip{width:32px;height:32px;border-radius:10px;display:grid;place-items:center} .pjs-chip-g{background:var(--s-green-l,var(--c-gray-95));color:var(--s-green-ink,var(--c-green-35))} .pjs-chip-b{background:var(--s-blue-l,var(--c-gray-95));color:var(--s-blue,var(--c-blue-40))}
/* More details */
.pjs-more{margin-top:4px}
.pjs-more > summary{list-style:none;cursor:pointer;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;padding:14px 18px;border:1px solid var(--s-line,var(--c-gray-90));border-radius:14px;background:var(--s-card,var(--c-gray-99));color:var(--s-ink,var(--c-slate-15))}
.pjs-more > summary::-webkit-details-marker{display:none}
.pjs-more > summary::after{content:'›';margin-left:auto;transform:rotate(90deg);color:var(--s-faint,var(--c-slate-65));font-size:18px}
.pjs-more[open] > summary::after{transform:rotate(-90deg)}
.pjs-more > summary small{font-size:12.5px;color:var(--s-muted,var(--c-slate-55))}
.pjs-more[open] > summary{margin-bottom:16px}
@media (max-width:1100px){ .pjs-g2{grid-template-columns:minmax(0,1fr)} }
@media (max-width:700px){
  .pjs-verdict{grid-template-columns:auto minmax(0,1fr);gap:14px} .pjs-verdict > .pjs-btn{grid-column:1 / -1;justify-self:start}
  .pjs-verdict{grid-template-columns:minmax(0,1fr)} .pjs-gauge{width:210px;justify-self:center}
  .pjs-foot .pjs-btn{margin-left:0}
  .pjs-chartcard .pjs-h{flex-wrap:wrap} .pjs-chartcard .pjs-h .pjs-legend{margin-left:0;width:100%}
  .pjs-v h2{font-size:18px} .pjs-card{padding:14px} .pjs-fxs{grid-template-columns:minmax(0,1fr)}
}
/* the year's expenses in the Spending card (2026-10-15) */
.pjs-spend .pjs-exp { padding:3px 0; border-bottom:1px solid var(--c-gray-90); font-size:14px; }
.pjs-spend .pjs-exp-tot { border-bottom:0; font-weight:700; padding-top:6px; }