/* Mivu app-screen recreations for the phone mockups. Loads after /appshift.css. */

/* ─── App screen recreations ──────────────────────────────────────────────────────
   Each screen is laid out at iPhone size (390 × 795 pt) with the app's own type scale,
   spacing and tokens, then zoomed to fit the mockup (--k is set from the screen width). */
.app {
  position: absolute; top: 0; left: 0; width: 390px; height: 795px; zoom: var(--k, 0.718);
  display: flex; flex-direction: column; text-align: left;
  font-family: 'Albert Sans', var(--font); color: #15122a; background: #f3f1f8;
  -webkit-font-smoothing: antialiased;
}
.app::after { content: ''; position: absolute; left: 50%; bottom: 8px; width: 134px; height: 5px; margin-left: -67px; border-radius: 3px; background: currentColor; }
.app .sb { flex: none; height: 54px; display: flex; justify-content: space-between; align-items: center; padding: 6px 30px 0 46px; font-size: 17px; font-weight: 600; font-variant-numeric: tabular-nums; }
.app .sb .sys { width: 78px; height: 13px; }
.app .body { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 8px 24px 0; }
.app .foot { flex: none; padding: 16px 24px 34px; }
.app .cta { height: 56px; border-radius: 999px; display: grid; place-items: center; font-size: 17px; font-weight: 700; background: #1d1640; color: #fff; }
.app .eb { font-size: 12px; line-height: 16px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.app h4 { margin: 0; font-size: 30px; line-height: 34px; font-weight: 800; letter-spacing: -0.03em; color: inherit; }
.app p { margin: 0; }

/* Shield: what iOS shows over a locked app, with Mivu's configuration */
.app.shield { background: #1d1640; color: #fff; }
.shield .body { align-items: center; justify-content: center; text-align: center; padding: 0 44px 24px; }
.shield .mark { width: 92px; height: 92px; margin-bottom: 24px; }
.shield h4 { font-size: 26px; line-height: 31px; font-weight: 700; letter-spacing: -0.02em; }
.shield p { margin-top: 10px; font-size: 17px; line-height: 23px; font-weight: 500; color: rgba(255, 255, 255, 0.72); }
.shield .foot { padding-bottom: 46px; }
.shield .cta { height: 54px; border-radius: 16px; background: #6a2bff; }

/* Plan (end of onboarding) */
.plan .body > .eb { color: #6a2bff; }
.plan .title { margin: 10px 0 20px; }
.plan .hc { display: flex; align-items: center; gap: 12px; padding: 20px 16px 20px 20px; border-radius: 32px; background: #efe6ff; }
.plan .hc-text { flex: 1; display: grid; justify-items: start; gap: 12px; }
.plan .big { font-size: 30px; line-height: 34px; font-weight: 700; letter-spacing: -0.025em; }
.plan .big em { font-style: normal; color: #6a2bff; }
.plan .when { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: #fff; font-size: 15px; line-height: 20px; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.plan .when .i { font-size: 16px; color: #6a2bff; }
.plan .badge { flex: none; width: 104px; height: 104px; border-radius: 50%; object-fit: cover; }
.plan .week { display: grid; gap: 12px; margin-top: 12px; padding: 16px; border-radius: 28px; background: #fff; }
.plan .week .eb { color: #a09cb5; }
.plan .days { display: flex; justify-content: space-between; }
.plan .dc { display: grid; justify-items: center; gap: 4px; }
.plan .d { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; font-size: 16px; font-weight: 700; background: #efe6ff; color: #6a2bff; }
.plan .d.off { background: #f7f6fb; color: #a09cb5; }
.plan .d.start { background: #6a2bff; color: #fff; }
.plan .dc small { font-size: 11px; line-height: 14px; font-weight: 600; color: transparent; }
.plan .dc.first small { color: #6a2bff; }
.plan .promises { display: flex; gap: 8px; margin-top: 12px; }
.plan .pr { flex: 1; display: grid; align-content: start; gap: 8px; padding: 12px; border-radius: 22px; background: #fff; }
.plan .tile { width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; font-size: 20px; }
.plan .t-violet { background: #efe6ff; color: #6a2bff; }
.plan .t-sky { background: #dcefff; color: #1b79e0; }
.plan .t-mint { background: #dcf7ea; color: #159463; }
.plan .pr p { font-size: 13px; line-height: 17px; font-weight: 500; }

/* Celebration (after a verified practice) */
.celebrate .body { justify-content: center; gap: 24px; padding: 0 20px; }
.celebrate .top { position: relative; display: grid; justify-items: center; gap: 4px; }
.celebrate .confetti { position: absolute; inset: 0; pointer-events: none; }
.celebrate .confetti i { position: absolute; opacity: 0.9; }
.celebrate .streak { position: relative; display: flex; align-items: center; gap: 4px; }
.celebrate .streak b { font-size: 96px; line-height: 100px; font-weight: 800; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.celebrate .streak .i, .celebrate .d.done .i { color: #ff5a1f; --i2: #ffc247; --i2o: 1; }
.celebrate .streak .i { font-size: 64px; }
.celebrate .top .eb { position: relative; color: #e2601c; }
.celebrate h4 { text-align: center; }
.celebrate .card { padding: 16px; border-radius: 32px; background: #fff; }
.celebrate .week { display: flex; justify-content: space-between; }
.celebrate .dc { display: grid; justify-items: center; gap: 8px; font-size: 11px; line-height: 14px; font-weight: 600; color: #a09cb5; }
.celebrate .dc.today { color: #15122a; }
.celebrate .d { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; font-size: 16px; font-weight: 700; color: #a09cb5; font-variant-numeric: tabular-nums; }
.celebrate .d.done { background: #ffe9dc; }
.celebrate .d.done .i { font-size: 18px; }
.celebrate .d.today { background: #1d1640; color: #fff; }
.celebrate .stats { display: flex; margin-top: 16px; padding-top: 16px; border-top: 1px solid rgba(21, 18, 42, 0.08); }
.celebrate .st { flex: 1; display: grid; align-content: start; gap: 2px; padding: 0 4px; }
.celebrate .st b { font-size: 20px; line-height: 25px; font-weight: 700; letter-spacing: -0.015em; }
.celebrate .st span { font-size: 13px; line-height: 18px; font-weight: 500; color: #6e6a86; }
.celebrate .divider { width: 1px; margin: 0 12px; background: rgba(21, 18, 42, 0.08); }
.celebrate .bar { height: 6px; margin-top: 8px; border-radius: 3px; background: #ffe9dc; overflow: hidden; }
.celebrate .bar i { display: block; width: 71%; height: 100%; border-radius: 3px; background: #ff5a1f; }
.celebrate .after { display: grid; justify-items: center; gap: 12px; }
.celebrate .ok { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 999px; background: #e6f7ef; color: #1c8f5e; font-size: 16px; line-height: 20px; font-weight: 700; }
.celebrate .ok .i { font-size: 16px; }
.celebrate .after p { max-width: 300px; text-align: center; font-size: 13px; line-height: 18px; font-weight: 500; color: #6e6a86; }