/* Phone frame and the core phone screens (To-Do, detail, More). */
#screen-mobile { background: radial-gradient(circle at 30% 20%, #ffeadb, transparent 45%), radial-gradient(circle at 80% 80%, #e8edf7, transparent 45%), var(--bg); display: flex; align-items: center; justify-content: center; padding: 16px; overflow: auto; }
#screen-mobile[hidden] { display: none; }
.phone-frame { height: 100%; max-height: 880px; display: flex; align-items: center; }
.phone { position: relative; width: 390px; height: min(844px, 100%); min-height: 640px; background: #fff; border-radius: 46px; border: 11px solid #14161a; box-shadow: 0 30px 70px rgba(16, 24, 40, .35); display: flex; flex-direction: column; overflow: hidden; }
.status-bar { height: 32px; flex: none; display: flex; justify-content: space-between; align-items: center; padding: 6px 26px 0; font-size: 12.5px; font-weight: 600; background: #fff; }
.phone-screen { flex: 1; min-height: 0; display: flex; flex-direction: column; background: #fff; }
.phone-screen.dark { background: #141a2b; color: #fff; }
.tabbar { flex: none; display: flex; border-top: 1px solid var(--line); background: #fff; padding: 6px 4px 10px; }
.tab { flex: 1; border: none; background: none; display: flex; flex-direction: column; align-items: center; gap: 2px; color: var(--muted); padding: 4px 0; font-size: 18px; }
.tab small { font-size: 11px; font-weight: 600; }
.tab.active { color: var(--accent); }
.phone .overlay-backdrop { align-items: flex-end; }
.phone .sheet { width: 100%; border-radius: 22px 22px 0 0; max-height: 88%; padding-bottom: 22px; animation: sheet-up .22s ease-out; }
@keyframes sheet-up { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }

.m-head { display: flex; align-items: center; gap: 8px; padding: 14px 18px 6px; flex: none; }
.m-head h1 { font-size: 28px; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; }
.m-head-text { flex: 1; min-width: 0; }
.m-head .icon-btn { margin-left: -8px; }
.m-head-text h1 { overflow-wrap: anywhere; }
.view-task .m-head h1 { font-size: 22px; }
.m-scroll { flex: 1; overflow-y: auto; padding: 4px 18px 16px; min-height: 0; }
.m-sub { margin: 0 0 12px; font-size: 13.5px; }
.m-bottom-action, .m-actions { flex: none; padding: 10px 18px 14px; background: linear-gradient(transparent, #fff 20%); }
.m-actions { display: flex; flex-direction: column; gap: 8px; border-top: 1px solid var(--line); background: #fff; }
.m-actions .btn { padding: 12px; }

.task-list { display: flex; flex-direction: column; gap: 10px; }
.task-card { display: flex; align-items: flex-start; gap: 12px; background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 14px; box-shadow: 0 1px 2px rgba(16, 24, 40, .05); }
.task-card.done { background: #f7f8fa; }
.task-card.done .task-main b { text-decoration: line-through; color: var(--muted); }
.check-btn { width: 28px; height: 28px; border-radius: 50%; border: 2px solid #c4c9d2; background: #fff; flex: none; color: #fff; font-weight: 800; margin-top: 1px; }
.check-btn.on { background: var(--ok); border-color: var(--ok); }
.task-main { flex: 1; border: none; background: none; text-align: left; padding: 0; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.task-main b { font-size: 16px; line-height: 1.25; }
.task-main .muted { font-size: 13px; }
.due { align-self: flex-start; margin-top: 4px; font-size: 12px; font-weight: 600; color: var(--accent-dark); background: var(--accent-soft); border-radius: 999px; padding: 2px 9px; }
.due.reminder { background: #eef0ff; color: #3b45a6; }

.from-line { display: flex; gap: 10px; align-items: center; margin: 4px 0 12px; }
.due-banner { background: var(--accent-soft); color: var(--accent-dark); font-weight: 600; font-size: 13px; padding: 8px 12px; border-radius: 10px; margin-bottom: 10px; }
.email-card { background: #f6f7f9; border-radius: 14px; padding: 14px 16px; line-height: 1.55; font-size: 15px; }
.email-card p { margin: 0 0 12px; }
.email-card p:last-child { margin-bottom: 0; }
.suggest-banner.small { padding: 9px 12px; margin-bottom: 8px; }
.suggest-banner.small .muted { font-size: 12px; }

.more-list { display: flex; flex-direction: column; gap: 10px; }
.more-item { display: flex; align-items: center; gap: 14px; background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 14px; text-align: left; }
.more-item > span:nth-child(2) { flex: 1; display: flex; flex-direction: column; }
.more-item .muted { font-size: 13px; }
.more-icon { width: 40px; height: 40px; border-radius: 12px; background: var(--accent-soft); color: var(--accent-dark); display: inline-flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 700; }
.chev { color: #a0a6b1; font-size: 22px; }

/* real phone: full screen, no frame */
@media (max-width: 520px) {
  #screen-mobile { padding: 0; }
  .phone-frame { max-height: none; width: 100%; height: 100%; }
  .phone { width: 100%; height: 100%; min-height: 0; border: none; border-radius: 0; box-shadow: none; }
  .status-bar { display: none; }
}
@media (max-height: 700px) and (min-width: 521px) {
  .phone { min-height: 0; }
}