/* ============================================================
   Must-pay bills (Money screen) and the Playbook
   ============================================================ */

/* the sixth sidebar item exists only on a laptop; the phone uses the top button */
.desk-only{display:none}

/* ---------- must-pay bills ---------- */
.bills-card{margin-top:var(--sp-5)}
.more-btn{margin-left:auto;font-size:var(--t-label);font-weight:700;color:var(--orange);
  min-height:40px;padding:0 4px}
.bills-lead{font-size:var(--t-label);color:var(--ink-3);margin:calc(var(--sp-2) * -1) 0 var(--sp-3);line-height:1.5}
.bill-sum{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-2);margin-bottom:var(--sp-3)}
.bill-sum:empty{display:none}
.bill-sum div{background:var(--surface-2);border:1px solid var(--line-soft);border-radius:var(--r-sm);padding:10px var(--sp-3)}
.bill-sum span{display:block;font-size:var(--t-micro);color:var(--ink-3);font-weight:650}
.bill-sum b{display:block;font-size:var(--t-body);font-weight:800;margin-top:2px}
.bill-sum div:first-child b{color:var(--orange)}

.bill{display:flex;align-items:center;gap:var(--sp-3);width:100%;text-align:left;
  padding:11px 0;border-bottom:1px solid var(--line-soft);min-height:56px}
.bill:last-of-type{border-bottom:0}
.bill:active{opacity:.7}
.bill-t{flex:1;min-width:0}
.bill-t b{display:block;font-size:var(--t-label);font-weight:700}
.bill-t i{display:block;font-style:normal;font-size:var(--t-micro);color:var(--ink-3);margin-top:2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bill-t i.warn{color:var(--warn);font-weight:700}
.bill-t i.bad{color:var(--bad);font-weight:700}
.bill-v{text-align:right;flex-shrink:0}
.bill-v b{display:block;font-size:var(--t-label);font-weight:800}
.bill-v i{display:block;font-style:normal;font-size:var(--t-micro);color:var(--ink-3)}
.bill-sub{font-size:var(--t-micro);font-weight:800;color:var(--ink-3);text-transform:uppercase;
  letter-spacing:.06em;margin:var(--sp-4) 0 var(--sp-1)}
.bill-note{font-size:var(--t-label);color:var(--ink-2);line-height:1.55;background:var(--warn-bg);
  border-radius:var(--r-sm);padding:10px var(--sp-3);margin-top:var(--sp-2)}
.bill-note b{font-weight:800}

.bl-ideas{margin-bottom:var(--sp-4)}
.bl-paid{width:100%;margin-bottom:var(--sp-2);color:var(--good);font-weight:700}
.bl-del{width:100%;color:var(--bad);margin-bottom:var(--sp-2)}

/* ---------- playbook ---------- */
.pb-top{display:flex;align-items:flex-start;gap:var(--sp-3);margin-bottom:var(--sp-4)}
.pb-top > div{flex:1;min-width:0}
.pb-top .screen-title{margin-bottom:var(--sp-1)}
.pb-lead{font-size:var(--t-label);color:var(--ink-3);line-height:1.5}
.pb-add{flex:0 0 auto;min-height:44px;padding:10px var(--sp-4)}
.pb-chips{margin:var(--sp-3) 0 var(--sp-2)}
.pb-chips .chip b{margin-left:4px}

.pb-h{font-size:var(--t-label);font-weight:800;color:var(--ink-3);margin:var(--sp-5) 0 var(--sp-2)}
.pb-item{display:block;width:100%;text-align:left;background:var(--surface);border:1px solid var(--line);
  border-left:3px solid var(--navy);border-radius:var(--r-sm);padding:var(--sp-3) var(--sp-4);
  margin-bottom:var(--sp-2);box-shadow:var(--lift)}
[data-theme="dark"] .pb-item{border-left-color:#7B8BA6}
.pb-item.decision{border-left-color:var(--orange)}
.pb-item.where{border-left-color:var(--good)}
.pb-item:active{transform:scale(.99)}
.pb-item b{display:block;font-size:var(--t-body);font-weight:700;letter-spacing:-.01em;line-height:1.35}
.pb-item span{display:block;font-size:var(--t-label);color:var(--ink-2);line-height:1.6;margin-top:var(--sp-1);
  white-space:pre-line}
.pb-item i{display:block;font-style:normal;font-size:var(--t-micro);color:var(--ink-3);font-weight:650;margin-top:var(--sp-2)}
.pb-empty{font-size:var(--t-label);color:var(--ink-3);text-align:center;padding:var(--sp-6) 0}

/* narrow phones: the sync pill shows only its light, so the top bar fits */
@media (max-width:400px){
  .sync-pill{padding:7px 10px;margin-left:var(--sp-1)}
  .sync-pill #syncText{display:none}
}

@media (min-width:900px){
  .desk-only{display:flex}
  #pbBtn{display:none}
  [data-screen="money"] .card.card-full{display:block;width:auto;margin-left:0}
  [data-screen="money"] .card.card-full + .card{margin-left:0}
  #pbList{columns:2;column-gap:var(--sp-4)}
  .pb-h{column-span:all}
  .pb-item{break-inside:avoid}
}