/* ============================================================
   Duo · views — per-screen layout + desktop dashboard grid
   ============================================================ */

.dash{display:block;}
@media (min-width:960px){
  .dash{display:grid; grid-template-columns:5fr 4fr; gap:28px; align-items:start;}
  .dash .col{min-width:0;}
  .page-head{grid-column:1 / -1;}
}

/* insights KPI row */
.kpis{display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:14px;}
@media (min-width:960px){
  .kpis{grid-column:1 / -1;}
}

/* insights: single flowing column with a responsive bento grid below */
.ins-view{display:block;}
.ins-view .page-head{margin-bottom:16px;}
.ins-hero{background:var(--surface);}
.ins-hero-badge{text-align:right; background:var(--mint-dim); border:1px solid var(--mint-line); border-radius:14px; padding:10px 14px;}

/* bento: cards fill the width and balance instead of stacking in one tall column */
.ins-grid{display:grid; grid-template-columns:1fr; gap:14px; align-items:start;}
@media (min-width:720px){ .ins-grid{grid-template-columns:1fr 1fr;} }
@media (min-width:1080px){ .ins-grid{grid-template-columns:repeat(3,1fr);} }
.ins-tip{background:var(--mint-dim); border:1px solid var(--mint-line);}

/* category legend rows */
.cat-row{display:flex; gap:10px; align-items:center; padding:6px 0;}
.cat-dot{width:9px; height:9px; border-radius:3px; flex-shrink:0;}
.cat-name{font-size:13px; color:var(--ink-2); flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.cat-pct{font-family:var(--font-ui); font-size:13px; font-weight:600; font-variant-numeric:tabular-nums; letter-spacing:-0.01em;}

/* six-month chart */
.hist{display:flex; align-items:flex-end; gap:10px; height:138px; position:relative;}
.hist .budget-line{position:absolute; left:0; right:0; border-top:1.5px dashed var(--ink-3); opacity:0.5;}
.hist .hcol{flex:1; display:flex; flex-direction:column; align-items:center; gap:6px; height:100%; justify-content:flex-end; z-index:1;}
.hist .hbar{width:100%; max-width:42px; border-radius:8px 8px 3px 3px; transition:height .85s var(--spring);}

/* onboarding / negotiation / review full-screens */
.full{padding-top:48px; max-width:540px; margin:0 auto;}