/* Goals view: goal cards and cost breakdowns */

.goals-grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:14px;
}
.goalcard{
  display:flex;
  flex-direction:column;
}
.goalcard-head{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:10px;
  margin-bottom:12px;
}
.goalcard-title{
  font-family:var(--font-display);
  font-size:15px;
  font-weight:700;
  margin:0;
}
.goalcard-pct{
  font-family:var(--font-mono);
  font-size:13px;
  font-weight:700;
  color:var(--teal);
  white-space:nowrap;
  flex-shrink:0;
}
.goalcard-progress-track{
  height:8px;
  background:var(--line-soft);
  border-radius:5px;
  overflow:hidden;
  margin-bottom:16px;
}
.goalcard-progress-fill{
  height:100%;
  border-radius:5px;
  background:var(--teal);
  width:0%;
  transition:width .6s cubic-bezier(.2,.7,.3,1);
}
.goalcard-stats{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:10px;
  padding-bottom:14px;
  margin-bottom:12px;
  border-bottom:1px solid var(--line-soft);
}
.goalcard-stat-label{
  font-size:10.5px;
  text-transform:uppercase;
  letter-spacing:0.04em;
  color:var(--text-faint);
  font-weight:600;
  margin-bottom:3px;
}
.goalcard-stat-value{
  font-family:var(--font-mono);
  font-size:13px;
  font-weight:700;
  color:var(--text);
}
.goalcard-meta{
  font-size:11.5px;
  color:var(--text-dim);
  margin-bottom:3px;
}
.goalcard-details{margin-top:10px;}
.goalcard-details summary{
  font-size:12px;
  font-weight:600;
  color:var(--text-dim);
  cursor:pointer;
  list-style:none;
  display:flex;
  align-items:center;
  gap:6px;
}
.goalcard-details summary::-webkit-details-marker{display:none;}
.goalcard-details summary::before{
  content:'▸';
  font-size:9px;
  color:var(--text-faint);
  transition:transform .15s ease;
}
.goalcard-details[open] summary::before{transform:rotate(90deg);}
.goalcard-items{
  margin-top:10px;
  display:flex;
  flex-direction:column;
  gap:7px;
}
.goalcard-item-row{
  display:flex;
  justify-content:space-between;
  font-size:12.5px;
}
.goalcard-item-name{color:var(--text-dim);}
.goalcard-item-cost{font-family:var(--font-mono); color:var(--text); font-weight:600;}

/* ---- Add / edit / delete ---- */

.goals-controls{
  display:flex;
  justify-content:flex-end;
  margin-bottom:16px;
}

/* The title takes the slack so the percentage and actions stay right-aligned. */
.goalcard-head .goalcard-title{flex:1; min-width:0;}

.goalcard-actions{
  display:flex;
  gap:1px;
  flex-shrink:0;
  /* Revealed on card hover so a wall of goal cards stays calm, but always
     reachable by keyboard. */
  opacity:0;
  transition:opacity .12s ease;
}
.goalcard:hover .goalcard-actions,
.goalcard-actions:focus-within{opacity:1;}

.goalcard-action{
  border:none;
  background:transparent;
  color:var(--text-faint);
  font-size:12px;
  line-height:1;
  padding:4px 6px;
  border-radius:6px;
  cursor:pointer;
  transition:background .12s ease, color .12s ease;
}
.goalcard-action:hover{background:var(--line-soft); color:var(--text);}
.goal-delete:hover{background:var(--rust-soft); color:var(--rust);}
.goalcard-action:focus-visible{outline:2px solid var(--teal); outline-offset:1px;}

@media (hover: none){
  .goalcard-actions{opacity:1;}   /* no hover on touch: never hide the only way to edit */
}

/* ---- Cost breakdown editor (goal dialog) ---- */

.goal-items{display:flex; flex-direction:column; gap:7px;}
.goal-item-row{
  display:flex;
  align-items:center;
  gap:7px;
}
.goal-item-row .goal-item-name{flex:1; min-width:0;}
/* The narrowest amount field in the app, so it is the one a wide currency symbol
   squeezes hardest: at 118px a three-character symbol leaves under eight
   characters for the digits. The box grows by exactly the symbol's extra width
   instead, and stays where it was for a one-character one.

   The font is declared on the wrapper, not only on the input inside it, because
   `ch` resolves against the element it is written on — without it this width
   would be measured in Inter's characters while the padding was measured in
   JetBrains Mono's. */
.goal-item-cost-wrap{
  width:calc(118px + (var(--sym-len, 1) - 1) * 1ch);
  font-family:var(--font-mono);
  font-size:13.5px;
  flex-shrink:0;
}
.goal-item-cost-wrap .goal-item-cost{
  padding-left:var(--money-pad);
  font-family:var(--font-mono);
}
.goal-item-remove{
  flex-shrink:0;
  border:none;
  background:transparent;
  color:var(--text-faint);
  font-size:12px;
  line-height:1;
  padding:7px 7px;
  border-radius:7px;
  cursor:pointer;
}
.goal-item-remove:hover{background:var(--rust-soft); color:var(--rust);}
.goal-item-remove:focus-visible{outline:2px solid var(--teal); outline-offset:1px;}

.goal-item-add{
  align-self:flex-start;
  margin-top:8px;
  border:1px dashed var(--line-input);
  background:transparent;
  color:var(--text-dim);
  font-family:inherit;
  font-size:12.5px;
  font-weight:600;
  padding:7px 12px;
  border-radius:8px;
  cursor:pointer;
}
.goal-item-add:hover{border-style:solid; color:var(--text); background:var(--line-soft);}
.goal-item-add:focus-visible{outline:2px solid var(--teal); outline-offset:1px;}

.goal-items-total{
  margin:9px 2px 0;
  font-size:11.5px;
  color:var(--text-dim);
  font-family:var(--font-mono);
}
/* Informational only — a breakdown that does not equal the target is allowed. */
.goal-items-total.is-mismatch{color:var(--gold);}

/* Over-target confirmation, shown in place of the goal form.
   Informational blue rather than a warning colour: nothing has gone wrong, the app
   is telling you what saving will do. */
.goal-confirm{
  display:flex;
  align-items:flex-start;
  gap:11px;
  padding:15px 16px;
  border-radius:11px;
  background:var(--indigo-soft);
  color:var(--indigo-deep);
}
.goal-confirm-icon{
  flex-shrink:0;
  margin-top:1px;
}
.goal-confirm-text{
  margin:0;
  font-size:13.5px;
  line-height:1.5;
  font-weight:500;
}
/* Its own line: the consequence reads as a separate statement from the arithmetic. */
.goal-confirm-note{display:block;}

#goalConfirm .txn-dialog-actions{margin-top:20px;}
/* Matched sizing, so neither choice looks like the lesser one. */
#goalConfirm .btn{
  padding:10px 18px;
  font-size:13px;
  border-radius:10px;
}