/* Loans (loans.js): one block per loan with the open amount, a springing progress bar and a short status line */
.loan{padding:16px 0;border-top:1px solid var(--line)}
.loan:first-of-type{border-top:0}
.loan-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap}
.loan-head strong{font-size:16px}
.loan-open{color:var(--muted);font-size:13px}
.loan-open b{color:var(--ink);font-size:18px;font-variant-numeric:tabular-nums;margin-left:4px}
.loan-bar{position:relative;height:14px;margin:12px 0 10px;border-radius:999px;overflow:hidden;background:color-mix(in srgb,var(--ink) 9%,transparent);box-shadow:inset 0 1px 2px rgba(0,0,0,.18)}
.loan-bar>i{position:absolute;inset:0;transform-origin:left center;transform:scaleX(var(--p,0));border-radius:inherit;
 background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 70%,#1d6e6a),var(--accent));
 transition:transform 1.1s cubic-bezier(.34,1.35,.64,1)}
.loan-bar>i::after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.35) 50%,transparent 70%);background-size:220% 100%;animation:loan-sheen 2.6s ease-in-out 1.1s 1 both}
@keyframes loan-sheen{from{background-position:120% 0}to{background-position:-120% 0}}
html[dir=rtl] .loan-bar>i{transform-origin:right center}
.loan-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.loan-foot small{color:var(--muted)}
.loan.is-done .loan-bar>i{background:linear-gradient(90deg,#8fd3b8,#d9a441)}
@media(prefers-reduced-motion:reduce){.loan-bar>i{transition:none}.loan-bar>i::after{animation:none}}