/* Milestone plan pop-up (owner's handoff, 2026-10-18). Atlas Money colors. */
.mps-backdrop {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(0, 0, 0, 0.32);
  animation: mps-fade 0.25s ease;
}
.mps-sheet {
  touch-action: pan-y;
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 201;
  height: 75vh; display: flex; flex-direction: column; overflow: hidden;
  background: #F2F2F7;
  border-radius: 28px 28px 0 0;
  box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.18);
  font-family: "Inter Tight", system-ui, sans-serif;
  color: #1C1C1E;
  animation: mps-up 0.38s cubic-bezier(0.22, 0.8, 0.24, 1);
}
.mps-grabber { flex-shrink: 0; width: 38px; height: 5px; border-radius: 3px; background: #D1D1D6; margin: 8px auto 0; }
.mps-head { flex-shrink: 0; display: flex; justify-content: space-between; align-items: center; padding: 10px 18px 4px 20px; }
.mps-kicker { font-size: 13px; font-weight: 600; color: #6E6E73; }
.mps-title { margin: 2px 0 0; font-size: 24px; font-weight: 800; letter-spacing: -0.02em; color: #000000; }
.mps-close {
  width: 40px; height: 40px; border: none; border-radius: 20px; background: #FFFFFF;
  display: flex; align-items: center; justify-content: center;
  -webkit-tap-highlight-color: transparent;
}
.mps-body {
  flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch;
  display: flex; flex-direction: column; gap: 18px;
  padding: 8px 0 calc(env(safe-area-inset-bottom, 0px) + 24px);
}
.mps-body > * { flex-shrink: 0; }

.mps-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; padding: 0 14px; }
.mps-day { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.mps-dlabel { font-size: 12px; font-weight: 500; color: #6E6E73; }
.mps-today { font-weight: 700; color: #000000; }
.mps-dnum {
  width: 40px; height: 40px; border-radius: 50%; background: #FFFFFF;
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 500; color: #1C1C1E;
}
.mps-dnum-today { background: #FFD60A; font-weight: 700; }
.mps-dot { width: 5px; height: 5px; border-radius: 3px; background: transparent; }
.mps-dot-on { background: #33CC00; }

.mps-row { display: flex; justify-content: space-between; align-items: baseline; padding: 0 20px; }
.mps-h3 { margin: 0; font-size: 19px; font-weight: 700; color: #1C1C1E; }
.mps-right { font-size: 14px; font-weight: 600; color: #1C1C1E; }

.mps-scroll {
  display: flex; gap: 10px; overflow-x: auto; padding: 0 16px;
  scrollbar-width: none; -webkit-overflow-scrolling: touch; scroll-snap-type: x mandatory;
}
.mps-scroll::-webkit-scrollbar { display: none; }
.mps-scroll > * { scroll-snap-align: start; }

.mps-hero {
  flex-shrink: 0; width: 278px; height: 250px; box-sizing: border-box;
  border-radius: 24px; background: #FFD60A; overflow: hidden; position: relative;
  display: flex; flex-direction: column; align-items: center; padding-top: 22px; gap: 6px;
}
.mps-heroTitle { font-size: 20px; font-weight: 800; color: #3D2E00; text-align: center; padding: 0 16px; }
.mps-heroLine { font-size: 14px; font-weight: 500; color: #3D2E00; text-align: center; padding: 0 22px; line-height: 1.35; }
.mps-art { position: absolute; left: 0; bottom: 0; }
.mps-peek {
  flex-shrink: 0; width: 64px; height: 250px; border-radius: 22px; background: #EBDCA4;
  display: flex; align-items: center; justify-content: center;
}
.mps-peek span { transform: rotate(-90deg); white-space: nowrap; font-size: 17px; font-weight: 700; color: #3D2E00; }

.mps-win {
  flex-shrink: 0; width: 210px; min-height: 160px; box-sizing: border-box;
  border-radius: 22px; padding: 16px; display: flex; flex-direction: column; gap: 6px;
}
.mps-winTitle { font-size: 15px; font-weight: 700; color: #1C1C1E; }
.mps-winBody { flex: 1; font-size: 13px; font-weight: 500; color: #1C1C1E; line-height: 1.35; }
.mps-winFoot { display: flex; justify-content: space-between; align-items: center; margin-top: 6px; }
.mps-muted { font-size: 12px; font-weight: 500; color: #6E6E73; }
.mps-tag {
  height: 30px; padding: 0 12px; border: none; border-radius: 15px; background: #FFFFFF;
  font: inherit; font-size: 12px; font-weight: 700;
  -webkit-tap-highlight-color: transparent;
}

@keyframes mps-up { from { transform: translateY(100%); } to { transform: translateY(0); } }
@keyframes mps-fade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .mps-sheet, .mps-backdrop { animation: none; } }