/* Streak, five-stop finish, result sharing and tomorrow's countdown. */
.habit-streak { display:flex; align-items:center; gap:8px; margin:14px 0 0; font-size:15px; line-height:1.35; color:#fff6d5; }
.habit-streak svg { flex:none; width:20px; height:20px; color:#f3d17b; }
.habit-streak strong { color:#fffef7; }
.habit-streak small { font-size:inherit; color:#e7eadb; }

.habit-today { max-width:760px; margin:14px auto 0; padding:16px; background:var(--ui-surface,#fffdf7); border:1px solid var(--ui-border,#b7c5ac); border-radius:var(--ui-radius,16px); box-shadow:var(--ui-shadow,none); color:var(--ui-ink,#203b2c); }
.habit-today-head { display:flex; align-items:center; gap:12px; }
.habit-today-head strong { display:block; font:600 21px/1.2 var(--serif,Georgia,serif); }
.habit-today-head small { display:block; margin-top:3px; font-size:15px; color:var(--ui-muted,#455b47); font-variant-numeric:tabular-nums; }
.habit-check { flex:none; display:grid; place-items:center; width:40px; height:40px; border-radius:50%; background:#dce8cf; color:#28543c; font-weight:700; font-size:19px; }
.habit-today .habit-share { margin-top:14px; }

.habit-run { display:flex; flex-wrap:wrap; gap:8px; max-width:420px; margin:0 auto 18px; }
.habit-stat { flex:1 1 0; display:flex; flex-direction:column; align-items:center; gap:2px; min-width:0; padding:12px 4px 10px; background:var(--ui-surface,#fffdf7); border:1px solid var(--ui-border,#b7c5ac); border-radius:14px; color:var(--ui-ink,#203b2c); }
.habit-stat svg { width:18px; height:18px; color:#a07a22; }
.habit-stat strong { font:600 26px/1.1 var(--serif,Georgia,serif); font-variant-numeric:tabular-nums; }
.habit-stat span { font-size:13px; line-height:1.25; color:var(--ui-muted,#455b47); text-align:center; }
.habit-stat.habit-days { background:#fff6dc; border-color:#d8b85d; }
.habit-best { flex:0 0 100%; margin:2px 0 0; font-size:14px; color:var(--ui-muted,#455b47); text-align:center; }

.path-finish #continue-path { display:flex; align-items:center; justify-content:center; width:100%; max-width:420px; min-height:52px; margin:4px auto 0; font-size:18px; text-decoration:none; text-wrap:balance; }
.habit-share { max-width:420px; margin:12px auto 4px; text-align:center; }
.habit-share-button { display:inline-flex; align-items:center; justify-content:center; gap:8px; width:100%; min-height:48px; font-size:17px; }
.habit-share-button svg { width:20px; height:20px; }
.habit-share-status { min-height:1.4em; margin:8px 0 0; font-size:14px; color:var(--ui-muted,#455b47); }
.habit-share-status:empty { min-height:0; margin:0; }
.habit-share textarea { width:100%; margin-top:8px; padding:10px; font:15px/1.4 ui-monospace,Consolas,monospace; border:1px solid var(--ui-border,#b7c5ac); border-radius:10px; background:#fff; color:var(--ui-ink,#203b2c); resize:none; }

.habit-countdown { display:flex; align-items:flex-start; justify-content:center; gap:8px; max-width:420px; margin:14px auto 0; font-size:15px; line-height:1.4; color:var(--ui-muted,#455b47); text-align:left; }
.habit-countdown svg { flex:none; width:18px; height:18px; margin-top:1px; color:#a07a22; }
.habit-countdown strong { color:var(--ui-ink,#203b2c); font-variant-numeric:tabular-nums; white-space:nowrap; }
.habit-today .habit-countdown { justify-content:flex-start; max-width:none; }

.habit-note { display:flex; align-items:center; justify-content:center; gap:7px; margin:0 auto 10px; font-size:15px; color:#5d4a17; }
.habit-note svg { flex:none; width:18px; height:18px; color:#a07a22; }

.habit-petals { position:absolute; left:50%; top:50%; width:0; height:0; pointer-events:none; z-index:2; }
.habit-petals i { position:absolute; left:-4px; top:-7px; width:8px; height:14px; border-radius:8px 8px 8px 1px; background:var(--c); opacity:0; }

@media(prefers-reduced-motion:no-preference) {
 .habit-fresh .habit-stat { animation:habit-rise .5s cubic-bezier(.2,.7,.2,1) calc(var(--i)*120ms + 300ms) both; }
 .habit-fresh .habit-share,.habit-fresh .habit-countdown { animation:habit-rise .5s cubic-bezier(.2,.7,.2,1) .75s both; }
 .habit-fresh.delight-new-win .completion-emblem { animation:delight-stamp .48s ease-out both,habit-halo 1.5s ease-out .15s; }
 .habit-petals i { animation:habit-petal 1.25s cubic-bezier(.15,.65,.3,1) calc(var(--k)*22ms + 120ms) both; }
 .habit-pop { display:inline-block; animation:habit-pop .45s ease-out; }
}
@keyframes habit-rise { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:none; } }
@keyframes habit-halo { 0% { box-shadow:0 0 0 0 #f3d17bcc; } 100% { box-shadow:0 0 0 26px #f3d17b00; } }
@keyframes habit-petal {
 0% { opacity:0; transform:rotate(var(--a)) translateY(0) scale(.4); }
 18% { opacity:.95; }
 100% { opacity:0; transform:rotate(var(--a)) translateY(calc(var(--d) * -1)) rotate(55deg) scale(1); }
}
@keyframes habit-pop { 0% { transform:scale(.7); opacity:.4; } 60% { transform:scale(1.18); opacity:1; } 100% { transform:scale(1); } }
@media(prefers-reduced-motion:reduce) { .habit-petals { display:none; } }
@media(max-width:359px) {
 .habit-stat strong { font-size:22px; }
 .habit-stat span { font-size:12px; }
 .habit-streak { font-size:14px; }
}