/* ============================================================
   Duo · insights — the analyst dashboard
   Extends the existing warm Scandinavian system: same tokens,
   same radii, same spring. Nothing decorative — every element
   here carries a number, a comparison, or a reason.
   ============================================================ */

/* ---- shared section header ---- */
.sec-head{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:16px;}
.sec-head h2{font-size:15px; font-weight:600; letter-spacing:-0.01em;}
.sec-sub{font-size:11.5px; color:var(--ink-3); white-space:nowrap;}

/* compact segmented control for in-card switches */
.seg.mini{padding:3px; background:var(--surface-3); border-radius:10px;}
.seg.mini button{padding:6px 11px; font-size:12px; border-radius:8px;}

/* delta chips — one visual language for "up/down vs before" everywhere */
.chip-delta{
  font-size:11px; font-weight:700; padding:3px 8px; border-radius:99px;
  font-variant-numeric:tabular-nums; white-space:nowrap; letter-spacing:0.01em;
}
.chip-delta.good{background:var(--mint-dim); color:var(--mint-deep);}
.chip-delta.bad{background:var(--red-dim); color:var(--red);}
.chip-delta.flat{background:var(--surface-3); color:var(--ink-3);}

/* ---- 1 · financial health ---- */
.ins-score-card{
  background:linear-gradient(168deg, var(--surface) 0%, var(--mint-dim) 190%);
  border-color:var(--mint-line);
}
.hs-main{display:flex; align-items:center; gap:22px; flex-wrap:wrap;}
.hs-dial{position:relative; width:130px; height:130px; flex-shrink:0;}
.hs-dial svg{display:block;}
.hs-arc{transition:stroke-dashoffset 1.5s var(--spring);}
.hs-dial-mid{
  position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:1px;
}
.hs-num{font-size:40px; line-height:1; letter-spacing:-0.04em;}
.hs-den{font-size:11px; color:var(--ink-3); font-variant-numeric:tabular-nums;}
.hs-copy{flex:1; min-width:180px;}
.hs-grade{font-family:var(--font-display); font-size:23px; font-weight:700;
  letter-spacing:-0.03em; margin:5px 0 8px; line-height:1.1;}
.hs-summary{font-size:14px; line-height:1.6; color:var(--ink-2);}

.hs-parts{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(132px, 1fr));
  gap:16px 20px; margin-top:24px; padding-top:20px; border-top:1px solid var(--line);
}
.hs-part{opacity:0; animation:rise .5s var(--spring) forwards;}
.hs-part-top{display:flex; justify-content:space-between; align-items:baseline; margin-bottom:7px;}
.hs-part-label{font-size:12px; font-weight:600; color:var(--ink-2);}
.hs-part-val{font-size:13px; font-weight:700;}
.hs-part-max{color:var(--ink-3); font-weight:500; font-size:11px;}
.hs-bar{height:5px; background:var(--surface-3); border-radius:99px; overflow:hidden;}
.hs-bar i{display:block; height:100%; border-radius:99px; background:var(--mint);
  transition:width 1.1s var(--spring) .25s;}
.hs-part-note{font-size:11.5px; color:var(--ink-3); margin-top:7px; line-height:1.45;}

/* ---- 2 · budget performance ---- */
.bp-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(104px,1fr)); gap:10px; margin-bottom:18px;}
.bp-tile{background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r-md); padding:13px 14px;}
.bp-tile .lab{font-size:11px; color:var(--ink-2); margin-bottom:5px; font-weight:500;}
.bp-tile .val{font-size:18px; font-weight:600; letter-spacing:-0.02em;}
.bp-tile .sub{font-size:10.5px; color:var(--ink-3); margin-top:3px;}

.bp-track{position:relative; height:10px; background:var(--surface-3); border-radius:99px; overflow:visible;}
.bp-fill{display:block; height:100%; border-radius:99px; background:var(--mint);
  transition:width 1.2s var(--spring);}
.bp-proj{
  position:absolute; top:-5px; width:2px; height:20px; background:var(--ink);
  border-radius:2px; opacity:0.55;
}
.bp-proj::after{
  content:''; position:absolute; top:-3px; left:-2.5px; width:7px; height:7px;
  border-radius:50%; background:var(--ink); opacity:0.85;
}
.bp-scale{display:flex; justify-content:space-between; margin-top:7px; gap:8px;}

.forecast{
  display:flex; gap:11px; align-items:flex-start; margin-top:16px;
  padding:14px 16px; border-radius:var(--r-md); font-size:13.5px; line-height:1.55;
  border:1px solid transparent; animation:fadein .5s;
}
.forecast.good{background:var(--mint-dim); color:var(--mint-deep); border-color:var(--mint-line);}
.forecast.warn{background:var(--amber-dim); color:var(--amber); border-color:rgba(169,120,31,0.22);}
.fc-ic{width:18px; flex-shrink:0; margin-top:1px;}
.fc-ic svg{width:18px; height:18px;}

/* ---- 3 · timeline ---- */
.tl-line{stroke-dasharray:1200; stroke-dashoffset:1200; animation:draw 1.7s var(--spring) .1s forwards;}
.tl-bars{display:flex; align-items:flex-end; gap:7px; height:168px; position:relative; padding-top:18px;}
.tlb{flex:1; display:flex; flex-direction:column; align-items:center; justify-content:flex-end;
  gap:6px; height:100%; min-width:0;}
.tlb-v{font-size:9.5px; white-space:nowrap;}
.tlb-bar{
  width:100%; max-width:34px; border-radius:7px 7px 3px 3px; background:var(--surface-3);
  transition:height .9s var(--spring), background .2s; min-height:3px;
}
.tlb-bar.cur{background:var(--mint);}
.tlb-bar.over{background:var(--red); opacity:0.75;}
.tlb-bar.cur.over{background:var(--red); opacity:1;}
.tlb-l{font-size:9.5px; color:var(--ink-3); font-weight:600; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis; max-width:100%;}
.tl-rule{position:absolute; left:0; right:0; height:0; border-top:1px dashed var(--ink-3);
  opacity:0.5; pointer-events:none;}
.tl-rule i{position:absolute; right:0; top:-14px; font-size:9.5px; font-style:normal;
  color:var(--ink-3); background:var(--surface); padding:0 4px;}
.tl-rule.budget{border-color:var(--red); opacity:0.45;}
.tl-rule.budget i{color:var(--red);}

/* ---- 4 · story ---- */
.story-card{background:var(--surface); border-color:var(--mint-line);}
.story-body{
  font-family:var(--font-display); font-size:17px; font-weight:500;
  line-height:1.65; letter-spacing:-0.015em; color:var(--ink);
}

/* ---- 5 · what changed ---- */
.trend-list{display:flex; flex-direction:column; gap:12px;}
.trend-row{display:flex; align-items:center; gap:10px; opacity:0;
  animation:rise .45s var(--spring) forwards;}
.trend-cat{font-size:13.5px; font-weight:600; min-width:82px; flex-shrink:0;}
.trend-bar-wrap{flex:1; height:6px; background:var(--surface-3); border-radius:99px;
  overflow:hidden; min-width:24px;}
.trend-bar{display:block; height:100%; border-radius:99px; transition:width 1s var(--spring);}
.trend-bar.up{background:var(--red); opacity:0.7;}
.trend-bar.down{background:var(--mint); opacity:0.8;}
.trend-num{font-size:13px; font-weight:700; white-space:nowrap;}
.trend-num.good{color:var(--mint-deep);}
.trend-num.bad{color:var(--red);}

/* ---- 6 · savings ---- */
.save-card{background:linear-gradient(170deg, var(--surface) 0%, rgba(126,138,78,0.10) 210%);
  border-color:rgba(126,138,78,0.28);}
.save-hero{margin-top:2px;}
.save-hero .fig{font-size:42px; line-height:1; color:#586b30; letter-spacing:-0.04em;}
.save-hero-sub{font-size:13px; color:var(--ink-2); line-height:1.5; margin-top:6px; max-width:340px;}
.save-list{margin-top:18px; border-top:1px solid var(--line); padding-top:4px;}
.save-row{display:flex; align-items:center; gap:12px; padding:11px 0;
  border-bottom:1px solid var(--line); opacity:0; animation:rise .45s var(--spring) forwards;}
.save-row:last-child{border-bottom:none;}
.save-main{flex:1; min-width:0;}
.save-name{font-size:13.5px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.save-sub{font-size:11.5px; color:var(--ink-3); margin-top:2px; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap;}
.save-sub b{color:var(--mint-deep); font-weight:700;}
.save-amt{font-size:14.5px; font-weight:700; color:#586b30; white-space:nowrap;}

/* ---- 7 · category intelligence ---- */
.ci-list{display:flex; flex-direction:column; gap:4px;}
.ci-row{opacity:0; animation:rise .45s var(--spring) forwards; padding:4px 0;}
.ci-head{
  display:flex; align-items:center; gap:10px; width:100%; padding:8px 0;
  background:none; border:none; cursor:pointer; font-family:inherit; color:var(--ink);
  text-align:left;
}
.ci-name{flex:1; font-size:13.5px; font-weight:600; min-width:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.ci-amt{font-size:13.5px; font-weight:700; white-space:nowrap;}
.ci-chev{width:16px; text-align:center; color:var(--ink-3); font-size:15px; flex-shrink:0;}
.ci-track{height:5px; background:var(--surface-3); border-radius:99px; overflow:hidden;}
.ci-track i{display:block; height:100%; border-radius:99px; transition:width 1s var(--spring);}
.ci-detail{
  margin-top:12px; padding:13px 15px; background:var(--surface-2);
  border-radius:var(--r-md); border:1px solid var(--line); animation:rise .3s var(--spring);
}
.ci-detail p{display:flex; justify-content:space-between; gap:14px; padding:4px 0; font-size:12.5px;}
.ci-k{color:var(--ink-3); flex-shrink:0;}
.ci-v{text-align:right; font-weight:600; color:var(--ink-2);}
.ci-v.good{color:#586b30;}

/* ---- 8 · observations ---- */
.obs-card{background:var(--surface-2);}
.obs-list{display:flex; flex-direction:column; gap:2px;}
.obs{
  display:flex; gap:13px; align-items:flex-start; padding:12px 0;
  border-bottom:1px solid var(--line); opacity:0; animation:rise .5s var(--spring) forwards;
}
.obs:last-child{border-bottom:none;}
.obs-ic{
  width:30px; height:30px; border-radius:10px; flex-shrink:0; display:grid; place-items:center;
  background:var(--surface); color:var(--mint-deep); border:1px solid var(--line);
}
.obs-ic svg{width:16px; height:16px;}
.obs-text{font-size:13.5px; line-height:1.55; color:var(--ink); padding-top:5px;}

/* ---- 9 · habits ---- */
.hab-store{display:flex; align-items:center; gap:11px; padding:7px 0;}
.hab-store-name{font-size:12.5px; font-weight:600; min-width:88px; flex-shrink:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.hab-store-bar{flex:1; height:6px; background:var(--surface-3); border-radius:99px; overflow:hidden;}
.hab-store-bar i{display:block; height:100%; border-radius:99px; background:var(--brass);
  transition:width 1s var(--spring);}
.pi-split{
  display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:18px;
  padding-top:16px; border-top:1px solid var(--line);
}
.pi-split .lab{font-size:11px; color:var(--ink-2); font-weight:500; margin-bottom:4px;}
.pi-store{font-family:var(--font-display); font-size:16px; font-weight:700; letter-spacing:-0.02em;}

/* ---- 10 · product intelligence ---- */
.pi-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(132px,1fr)); gap:10px;}
.pi-card{
  background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r-md);
  padding:13px 14px; text-align:left; cursor:pointer; font-family:inherit; color:var(--ink);
  opacity:0; animation:rise .45s var(--spring) forwards; transition:border-color .18s, background .18s;
}
.pi-card:hover{border-color:var(--line-2); background:var(--surface);}
.pi-card .lab{font-size:10.5px; color:var(--ink-3); font-weight:600;
  letter-spacing:0.06em; text-transform:uppercase; margin-bottom:6px;}
.pi-name{font-size:13.5px; font-weight:600; line-height:1.3; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap;}
.pi-card .sub{font-size:11.5px; color:var(--ink-3); margin-top:4px;}
.mv-row{
  display:flex; align-items:center; gap:10px; width:100%; padding:9px 0;
  border-bottom:1px solid var(--line); background:none; border-left:none;
  border-right:none; border-top:none; cursor:pointer; font-family:inherit;
  color:var(--ink); text-align:left;
}
.mv-row:last-of-type{border-bottom:none;}
.mv-name{flex:1; font-size:13px; font-weight:600; min-width:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.mv-price{white-space:nowrap; color:var(--ink-3);}

/* ---- page rhythm: generous whitespace, bento on wide screens ---- */
.ins-view .card{margin-bottom:16px;}
.ins-view .page-head .seg button{white-space:nowrap;}
@media (max-width:430px){
  .ins-view .page-head .seg button{padding:9px 11px; font-size:12.5px;}
  .ins-view .page-head h1{font-size:27px;}
}
/* Very narrow phones (≤360px): the heading and its range switch can't sit
   side by side, and the resulting overflow pushed every card 22px wider than
   the viewport — a page-wide horizontal scroll. Let both the page header and
   the in-card section headers wrap instead. */
@media (max-width:360px){
  .ins-view .page-head .row{flex-wrap:wrap; gap:10px;}
  .ins-view .page-head .seg{width:100% !important; flex:1 1 100%;}
  .sec-head{flex-wrap:wrap; gap:8px;}
  .sec-head .seg.mini{flex:1 1 100%;}
}
/* minmax(0,1fr) rather than plain 1fr: a bare `1fr` track is min-sized to
   its content, so one un-shrinkable row (a trend row's fixed label + nowrap
   figures) inflated every card in the grid past the viewport and produced a
   page-wide horizontal scroll on 320px phones. */
.ins-view .ins-grid{display:grid; grid-template-columns:minmax(0,1fr); gap:0;}
.ins-view .ins-grid > .card{min-width:0;}
@media (min-width:760px){
  .ins-view .ins-grid{grid-template-columns:repeat(2, minmax(0,1fr)); gap:0 16px; align-items:start;}
  .ins-view .ins-grid > .card{break-inside:avoid;}
}
@media (min-width:1180px){
  .ins-view .ins-grid{grid-template-columns:repeat(3, minmax(0,1fr));}
  .ins-score-card .hs-main{gap:30px;}
}
/* let the flex rows inside actually shrink */
.trend-row, .save-row, .ci-head, .obs, .hab-store, .mv-row{min-width:0;}
.trend-cat, .save-main, .ci-name, .obs-text, .hab-store-name, .mv-name{min-width:0;}
@media (max-width:360px){
  .trend-cat{min-width:64px; font-size:12.5px;}
  .trend-num{font-size:12px;}
}
@media (prefers-reduced-motion:reduce){
  .hs-arc, .hs-bar i, .bp-fill, .trend-bar, .ci-track i, .hab-store-bar i, .tlb-bar{transition:none !important;}
  .tl-line{animation:none !important; stroke-dashoffset:0 !important;}
}