/* Bills page: bill rows, overdue and paid states, and the trend chart. */

.bill-row{
  display:flex; align-items:center; gap:10px; padding:11px 0; border-bottom:1px solid var(--line);
}
.bill-row:last-child{border-bottom:none;}
.bill-check{width:24px; height:24px; accent-color:var(--pine); flex-shrink:0; margin:0;}
.bill-mid{flex:1; min-width:0;}
.bill-name{font-size:15px; font-weight:600;}
.bill-row.paid .bill-name{color:var(--muted); text-decoration:line-through;}
.bill-amt{font-size:15px; font-weight:700; white-space:nowrap;}
.bill-row.paid .bill-amt{color:var(--muted);}
.bill-row.overdue{background:#fbebe8; margin:0 -16px; padding-left:16px; padding-right:16px; border-radius:8px;}
.bill-row.overdue .bill-name{color:var(--rust); font-weight:700;}
.bill-row.overdue .bill-amt{color:var(--rust);}
.bill-overdue-label{font-size:11.5px; font-weight:700; color:var(--rust); text-transform:uppercase; letter-spacing:.03em; margin-top:1px;}
.bills-heading{font-size:14px; color:var(--muted); margin-bottom:4px;}
.bill-amt{text-align:right;}
.trend-head{display:flex; align-items:center; justify-content:space-between; gap:10px;}
.trend-head select{width:auto; max-width:55%; padding:6px 8px; font-size:16px;}
.trend-change{font-size:13.5px; font-weight:700; margin:8px 0 2px; color:var(--ink);}
.trend-change .up{color:var(--rust);}
.trend-change .down{color:var(--pine-2);}
.trend-change .muted{color:var(--muted); font-weight:600;}
.trend-chart{position:relative;}
.trend-chart svg{display:block; width:100%; height:auto; overflow:visible;}
.trend-tip{
  position:absolute; pointer-events:none; transform:translate(-50%, -100%); white-space:nowrap;
  background:var(--ink); color:var(--white); font-size:12px; font-weight:600; padding:5px 8px; border-radius:7px;
  display:none;
}
.trend-note{font-size:12px; color:var(--muted); margin-top:4px;}
.bill-usual{font-size:11.5px; font-weight:600; color:var(--muted); text-decoration:none;}
.bill-row.editable .bill-mid, .bill-row.editable .bill-amt{cursor:pointer;}
.bills-heading .now-tag{
  font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.03em;
  color:var(--pine); background:#e3ede9; padding:2px 7px; border-radius:999px; margin-left:6px;
}