/* A drawn phone showing a real looking recent calls screen: dark frame, status bar, the
   calls app with its tabs, and rows with the missed / incoming / outgoing / forwarded icons.
   Decorative only (aria-hidden), light screen, no glow. Icons: Feather (MIT), sprite in index.html. */
.icon-sprite{position:absolute; width:0; height:0; overflow:hidden}
.phone{
  /* Real phone proportions (about 1 : 2.05), as large as the viewport height allows. */
  width:min(372px,100%,calc((100vh - 150px) * .488)); margin-inline:auto; border-radius:54px; padding:10px;
  background:linear-gradient(160deg,#2a2638,#15121f 60%);
  box-shadow:inset 0 0 0 1.5px #3b3650, 0 2px 4px rgba(30,26,51,.08), 0 30px 70px -22px rgba(40,24,90,.45);
}
.phone-screen{
  position:relative; overflow:hidden; border-radius:42px; background:#fff;
  aspect-ratio:352 / 742;
  display:flex; flex-direction:column;
}
/* Home indicator, and the list fading out under it as if it scrolls on. */
.phone-screen::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:64px; pointer-events:none;
  background:linear-gradient(to bottom,rgba(255,255,255,0),#fff 70%);
}
.phone-screen::before{
  content:""; position:absolute; z-index:1; left:50%; bottom:8px; width:112px; height:4px; margin-left:-56px;
  border-radius:4px; background:#1e1a33;
}
.phone-status{position:relative; display:flex; justify-content:space-between; align-items:center; padding:14px 26px 6px; font-size:.82rem; font-weight:700; color:#111; direction:ltr}
.phone-status time{font-variant-numeric:tabular-nums; min-width:44px}
.phone-island{position:absolute; left:50%; top:10px; width:92px; height:26px; margin-left:-46px; border-radius:14px; background:#0d0b14}
.phone-sig{display:flex; align-items:flex-end; gap:2px; height:11px}
.phone-sig i{display:block; width:3px; border-radius:1px; background:#111}
.phone-sig i:nth-child(1){height:4px} .phone-sig i:nth-child(2){height:6px} .phone-sig i:nth-child(3){height:8px} .phone-sig i:nth-child(4){height:11px}
.phone-app{display:flex; flex-direction:column; align-items:center; gap:10px; padding:12px 16px 8px}
.pa-title{align-self:flex-start; font-size:1.6rem; font-weight:800; color:#111; letter-spacing:-.02em}
.pa-tabs{display:flex; padding:2px; border-radius:9px; background:#eeeef0; font-size:.8rem; font-weight:600; color:#333}
.pa-tabs span{padding:4px 16px; border-radius:7px}
.pa-tabs .on{background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.14)}
.phone-count{display:flex; align-items:center; justify-content:center; gap:10px; margin:6px 14px 4px; padding:8px 12px; border-radius:14px; background:#fdecea}
.phone-count b{font-size:1.9rem; line-height:1; font-weight:800; color:#D92D20; font-variant-numeric:tabular-nums}
.phone-count span{color:#7a271a; font-size:.9rem; font-weight:600}
.phone-rows{list-style:none; margin:0; padding:4px 0 0; overflow:hidden; flex:1}
.phone-rows li{
  display:grid; grid-template-columns:22px minmax(0,1fr) auto; align-items:center; gap:12px;
  padding:9px 18px; max-height:64px; overflow:hidden;
  box-shadow:inset 0 -1px 0 #efedf3;
}
.cr-ic{width:18px; height:18px; fill:none; stroke:#8a8799; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.cr-main{display:flex; flex-direction:column; min-width:0}
.cr-main b{font-size:.95rem; font-weight:600; color:#111; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; direction:ltr; text-align:right}
.cr-main small{font-size:.76rem; color:#8a8799}
.phone-rows time{font-size:.8rem; color:#8a8799; font-variant-numeric:tabular-nums}
.day-row .cr-ic{stroke:#D92D20}
.day-row .cr-main b{color:#D92D20}
.day-old-h{display:block !important; padding:12px 18px 4px !important; font-size:.78rem; font-weight:700; color:#8a8799; box-shadow:none !important}
.day-old .cr-main b{color:#6b6880}