/* Only the replacement visual in the Insights spending-progress panel. */
#spendingProgressList.hl-tanks-list {display:grid;gap:20px;width:100%;min-width:0;}
.hl-tanks-item {display:grid;gap:5px;min-width:0;margin:0 auto;width:100%;max-width:1536px;}
.hl-tanks-heading {display:flex;align-items:baseline;justify-content:space-between;gap:8px;padding:0 4px;font-size:.8rem;color:var(--ink,#172b27);}
.hl-tanks-heading span {font-size:.7rem;text-align:right;color:var(--muted,#5d7770);}
.hl-tanks-stage {position:relative;min-width:0;width:100%;aspect-ratio:3/2;overflow:hidden;border-radius:11px;background:#151819 url('/assets/houseledger-poster.png') center/contain no-repeat;}
.hl-tanks-canvas {display:block;width:100%;height:100%;aspect-ratio:3/2;object-fit:contain;}
.hl-tanks-source {position:absolute;top:0;left:0;width:100%;height:100%;opacity:0.001;pointer-events:none;}
.hl-tanks-play {position:absolute;left:50%;bottom:9px;transform:translateX(-50%);border-radius:10px;background:#222b29;color:white;padding:8px 12px;border:1px solid #7b8e85;}
.hl-tanks-footer {display:flex;justify-content:space-between;flex-wrap:wrap;gap:5px 12px;padding:2px 5px;color:var(--ink,#172b27);font-variant-numeric:tabular-nums;font-size:.75rem;font-weight:700;}
@media(max-width:600px){
 .hl-tanks-heading {font-size:.72rem;}
 .hl-tanks-heading span {font-size:.65rem;}
 #spendingProgressList.hl-tanks-list {gap:12px;}
 .hl-tanks-item {max-width:100%;}
 .hl-tanks-stage {border-radius:7px;}
 .hl-tanks-footer {font-size:.65rem;}
}

/* APPROVAL PREVIEW: all changes phone-only; existing approved tank animation intact. */
@media(max-width:760px){
  body{margin:0;}
  #spendingProgressList.hl-tanks-list{display:grid;gap:10px;width:100%;min-width:0;}
  .hl-tanks-item{width:100%;max-width:none;gap:0;}
  .hl-tanks-heading{padding:0 8px 7px;font-size:clamp(10px,2.9vw,15px);}
  .hl-tanks-heading span{font-size:clamp(9px,2.7vw,13px);}
  .hl-tanks-stage{width:100%;aspect-ratio:1385 / 1024;border-radius:10px;}
  /* Background-only horizontal crop: x=70..1455; no stretching and no tank cropping. */
  .hl-tanks-canvas{position:absolute;left:-5.0541516%;top:0;width:110.9025271%;height:100%;aspect-ratio:3 / 2;max-width:none;object-fit:fill;}
  .hl-tanks-source{position:absolute;left:-5.0541516%;top:0;width:110.9025271%;height:100%;}
  .hl-tanks-footer{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px;padding:11px 0 4px;}
  .hl-summary-card{--accent:#168547;min-width:0;border:1px solid color-mix(in srgb,var(--accent) 30%,white);border-radius:11px;min-height:64px;padding:12px 3px 9px;position:relative;display:flex;flex-direction:column;gap:4px;align-items:center;justify-content:center;background:color-mix(in srgb,var(--accent) 3%,white);}
  .hl-summary-card::before{content:'';position:absolute;height:4px;left:15%;right:15%;top:-2px;background:var(--accent);border-radius:5px;}
  .hl-summary-income{--accent:#168547;}
  .hl-summary-balance{--accent:#78a72a;}
  .hl-summary-balance.is-deficit{--accent:#c83b37;}
  .hl-summary-expense{--accent:#c83b37;}
  .hl-summary-name{font-weight:800;color:var(--ink,#172b27);font-size:clamp(9px,2.65vw,13px);letter-spacing:.025em;text-transform:uppercase;}
  .hl-summary-amount{color:var(--accent);font-size:clamp(14px,4.15vw,22px);font-weight:850;font-variant-numeric:tabular-nums;letter-spacing:-.04em;white-space:nowrap;}
}

/* Real production panel: the approval preview had only 4px panel padding.
   Keep the same preview styling while accounting for the live panel padding,
   and bring the existing phone-only outer margins from ~15px to ~4px. */
@media(max-width:760px){
  .spending-progress-panel #spendingProgressList.hl-tanks-list {
    --hl-actual-panel-pad:clamp(20px,3vw,28px);
    --hl-outer-gain:2.75vw;
    width:calc(100% + var(--hl-actual-panel-pad) + var(--hl-actual-panel-pad) + var(--hl-outer-gain) + var(--hl-outer-gain));
    max-width:none;
    margin-inline:calc(0px - var(--hl-actual-panel-pad) - var(--hl-outer-gain));
  }
  #spendingProgressList.hl-tanks-list .hl-tanks-item{width:100%;max-width:none;margin:0;}
  #spendingProgressList.hl-tanks-list .hl-tanks-stage{width:100%;aspect-ratio:1385 / 1024;}
}