/* Phone home «کارتابلِ من» (<900px). The phone block (.phh) is hidden on desktop, and the desktop markup (.ph-old) is hidden on the phone.
   Tokens only, so night mode follows. */
.phh{display:block}
@media (min-width:900px){ .phh{display:none} }
@media (max-width:899.98px){ .ph-old{display:none} }

.ph-hd{display:flex;align-items:center;gap:12px;margin:2px 6px 18px}
.ph-mark{height:28px;width:auto;flex:none}
.ph-mark.night{display:none}
html.dark .ph-mark.day{display:none}
html.dark .ph-mark.night{display:block}
.ph-hi h1{font-size:26px;line-height:1.35}
.ph-hi p{font-size:13px;color:var(--ink3);margin-top:1px}

/* status: one slim row; a zero is muted, a non-zero number is brand green (overdue: red) */
.ph-stat{display:flex;height:48px;border-radius:24px;background:var(--card);box-shadow:var(--shadow);margin-bottom:6px;padding:0 4px}
.ph-n{flex:1;min-width:0;display:flex;align-items:center;justify-content:center;gap:6px;border-radius:20px;margin:4px 0;position:relative;color:var(--ink3);font-size:12.5px;white-space:nowrap}
.ph-n b{font-size:17px;font-weight:400;color:var(--ink3);line-height:1}
.ph-n+.ph-n::before{content:"";position:absolute;inset-inline-start:0;top:24%;bottom:24%;width:1px;background:var(--sep)}
.ph-n.nz{color:var(--ink2)}
.ph-n.nz b{color:var(--em-t);font-weight:500}
.ph-n.nz.bad b{color:var(--crit-t)}
.ph-n.on{background:var(--mint)}
.ph-n.on::before,.ph-n.on+.ph-n::before{display:none}
.ph-calm{display:flex;align-items:center;gap:8px;height:48px;margin:0 8px 6px;color:var(--ink3);font-size:14px}
.ph-calm .i{color:var(--em-t);width:18px;height:18px}

/* sections */
.ph-sec{display:flex;align-items:center;gap:8px;margin:22px 8px 10px}
.ph-sec h2{font-size:15px;font-weight:500;color:var(--ink2)}
.ph-cap{min-width:22px;height:22px;padding:0 8px;border-radius:11px;background:var(--field);color:var(--ink3);font-size:12px;display:inline-grid;place-items:center;line-height:1}

/* rows */
.ph-list{background:var(--card);border-radius:24px;box-shadow:var(--shadow);padding:2px 16px}
.ph-row{display:flex;align-items:center;gap:10px;min-height:76px;width:100%}
.ph-row+.ph-row{border-top:1px solid var(--sep)}
.ph-hit{flex:1;min-width:0;display:flex;align-items:center;gap:14px;padding:12px 0;text-align:start;color:inherit}
.ph-t{flex:1;min-width:0;display:block}
.ph-rt{display:block;font-size:16px;font-weight:400;line-height:1.55;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ph-rm{display:flex;align-items:center;gap:4px 8px;margin-top:2px;font-size:12px;color:var(--ink3);min-width:0;white-space:nowrap}
.ph-rm>span{min-width:0}
.ph-rm>span:not(:last-child)::after{content:"،"}
.ph-rm.late{color:var(--crit-t)}
.ph-row .chev{width:16px;height:16px;color:var(--ink3);opacity:.7;flex:none}
.ph-more{display:flex;align-items:center;justify-content:center;width:100%;height:44px;margin-top:4px;color:var(--em-t);font-size:14px;font-weight:500}

/* «صندوق»: one slim card under the lists; the unit sits once beside the first number; a zero stays quiet */
.ph-fund{display:flex;align-items:center;gap:0;min-height:92px;margin-top:16px;padding:12px 18px;border-radius:24px;background:var(--card);box-shadow:var(--shadow)}
.ph-fb{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.ph-fb+.ph-fb{padding-inline-start:16px;margin-inline-start:16px;border-inline-start:1px solid var(--sep)}
.ph-fb small{font-size:12px;color:var(--ink3);white-space:nowrap}
.ph-fb b{font-size:19px;font-weight:400;line-height:1.4;white-space:nowrap}
.ph-fb b.z{color:var(--ink3)}
.ph-fnone{font-size:14px;color:var(--ink3);line-height:1.6}
.ph-u{font-size:11px;font-style:normal;color:var(--ink3);margin-inline-start:5px}
.ph-fund .chev{width:16px;height:16px;color:var(--ink3);opacity:.7;flex:none;margin-inline-start:10px}

.ph-hist{display:flex;align-items:center;justify-content:center;gap:2px;margin:16px auto 0;color:var(--ink3);font-size:13px}
.ph-hist .chev{width:14px;height:14px}

/* phone: the page fills the screen; the muted «گذشته‌ها» link sits at the foot, with room (72px) for the round «+» that floats above the tab bar */
@media (max-width:899.98px){
 .content:has(.phh){display:flex;flex-direction:column}
 .content:has(.phh) .pg{flex:1;display:flex;flex-direction:column}
 .phh{flex:1;display:flex;flex-direction:column;min-width:0;padding-bottom:72px}
 .phh>*{min-width:0;max-width:100%}
 .ph-hist{margin-top:auto;padding-top:16px;min-height:60px}
}