/* Mivo Wellness: mood calendar app (two phones), community circles, therapist inquiry, Mivo Games.
   Light teal palette and Poppins, taken from the Mivo Wellness mood calendar design. */
.mw{
  --mw-bg:#eef3f2;--mw-bg2:#f7f9f9;--mw-ink:#1d2423;--mw-ink-2:#4a5352;--mw-ink-3:#8b9493;--mw-line:#d8e0df;
  --mw-teal:#5f9d98;--mw-teal-hi:#6ea9a4;--mw-purple:#46405a;
  --m0:#dcebea;--m1:#a9cdc9;--m2:#5f9d98;--m3:#3f6e6a;--m4:#2c4a48;
  --mw-font:"Poppins",var(--body);
  color:var(--mw-ink);background:linear-gradient(180deg,#e6eeed,var(--mw-bg2) 60%,#f3f5f5);border-top:0
}
.mw-alt{background:linear-gradient(180deg,#f3f5f5,#e9f0ef)}
.mw .eyebrow{color:var(--mw-teal)}
.mw h2{color:var(--mw-ink)}
.mw .sec-lede{color:var(--mw-ink-2)}
.m0{background:var(--m0)}.m1{background:var(--m1)}.m2{background:var(--m2)}.m3{background:var(--m3)}.m4{background:var(--m4)}

/* Shared controls */
.mw-btn{display:inline-flex;align-items:center;justify-content:center;gap:.45rem;padding:.7rem 1.25rem;border:1px solid var(--mw-teal);border-radius:999px;background:var(--mw-teal);color:#fff;font:500 .875rem/1.2 var(--mw-font);transition:background .2s,border-color .2s,color .2s,transform .2s}
.mw-btn:hover{background:var(--m3);border-color:var(--m3)}
.mw-btn-ghost{background:transparent;color:var(--m3)}
.mw-btn-ghost:hover{color:#fff}
.mw-btn-block{width:100%;margin-top:1.25rem}
.mw-lbl{display:block;margin:1rem 0 .4rem;padding:0;font:500 .75rem/1.3 var(--mw-font);color:var(--mw-ink-2)}
.mw-in{width:100%;padding:.65rem .8rem;border:1px solid var(--mw-line);border-radius:.7rem;background:#fff;color:var(--mw-ink);font:400 .875rem/1.4 var(--mw-font)}
.mw-in:focus{outline:none;border-color:var(--mw-teal);box-shadow:0 0 0 3px rgba(95,157,152,.25)}
.mw-in::placeholder{color:var(--mw-ink-3)}
textarea.mw-in{resize:vertical}
.mw-set{margin:1rem 0 0;padding:0;border:0;min-width:0}
.mw-set .mw-lbl{margin-top:0}
.mw-chips{display:flex;flex-wrap:wrap;gap:.4rem}
.mw-chip{position:relative;cursor:pointer}
.mw-chip input,.mw-mood input{position:absolute;opacity:0;pointer-events:none}
.mw-chip span{display:block;padding:.35rem .75rem;border:1px solid var(--mw-line);border-radius:999px;background:#fff;font:400 .78rem/1.3 var(--mw-font);color:var(--mw-ink-2);transition:all .2s}
.mw-chip input:checked+span{border-color:var(--mw-teal);background:var(--mw-teal);color:#fff}
.mw-chip input:focus-visible+span,.mw-mood input:focus-visible~span{outline:2px solid var(--mw-teal);outline-offset:2px}
.mw-empty{font:400 .8rem/1.5 var(--mw-font);color:var(--mw-ink-3)}
.mw .ar{width:11px;height:11px}

/* Account bar above the phones */
.mw-account{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem 1rem;margin:-1.5rem 0 3rem;padding:1rem 1.25rem;border:1px solid var(--mw-line);border-radius:1.25rem;background:rgba(255,255,255,.75)}
.mw-account p{flex:1 1 16rem;font:400 .9rem/1.5 var(--mw-font);color:var(--mw-ink-2)}
.mw-acc-flg{font:1.05em/1 "Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif;vertical-align:-.08em} /* flags.js, after the nickname */
.mw-acc-flg-code{display:inline-grid;place-items:center;height:1.3em;padding:0 .35em;border-radius:.35em;background:#e4efed;font:600 .68rem/1 "JetBrains Mono",ui-monospace,monospace;letter-spacing:.06em;color:#3f6e6a;vertical-align:.05em}
.mw-acc-ic{display:grid;place-items:center;flex:none;width:36px;height:36px;border-radius:50%;background:var(--m0);color:var(--m4)}
.mw-acc-ic svg{width:17px;height:17px}

/* Phones */
.mw-phones{display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-start;gap:2.5rem 4rem}
/* iPhone: titanium band, black bezel, Dynamic Island, side buttons, home indicator */
.mw-phone{position:relative;flex:none;width:min(100%,330px);height:710px;padding:8px;border:3px solid transparent;border-radius:55px;background:linear-gradient(#0b0b0d,#0b0b0d) padding-box,linear-gradient(140deg,#b3b3b8 0%,#6b6b71 16%,#34343a 42%,#5b5b61 68%,#a9a9ae 100%) border-box;box-shadow:0 40px 70px -30px rgba(29,52,50,.45),0 18px 30px -18px rgba(0,0,0,.35)}
.mw-phone::before,.mw-phone::after,.mw-action{content:"";position:absolute;width:4px;border-radius:2px 0 0 2px;background:linear-gradient(90deg,#55555b,#8c8c92)}
.mw-phone::before{left:-7px;top:182px;height:56px;box-shadow:0 68px 0 #6c6c72} /* volume up and down */
.mw-action{left:-7px;top:122px;height:30px}
.mw-phone::after{right:-7px;top:212px;height:90px;border-radius:0 2px 2px 0;background:linear-gradient(270deg,#55555b,#8c8c92)} /* side button */
.mw-phone-b{margin-top:5rem}
.mw-island{position:absolute;top:19px;left:50%;z-index:10;width:98px;height:29px;border-radius:999px;background:#000;transform:translateX(-50%)}
.mw-home{position:absolute;bottom:16px;left:50%;z-index:10;width:108px;height:5px;border-radius:3px;background:rgba(0,0,0,.85);transform:translateX(-50%);pointer-events:none}
.mw-phone-a .mw-home{background:rgba(255,255,255,.85)} /* over the purple tab bar */
.mw-phone-a:has(.sheet-open) .mw-home{background:rgba(0,0,0,.85)} /* over the white entry sheet */
.mw-screen{position:relative;height:100%;overflow:hidden;border-radius:44px;background:#fafafa;font-family:var(--mw-font);color:var(--mw-ink)}
.mw-status{position:absolute;inset:0 0 auto;z-index:3;display:flex;align-items:center;justify-content:space-between;height:50px;padding:2px 22px 0 34px;background:linear-gradient(#fafafa 72%,rgba(250,250,250,0));color:#000;pointer-events:none}
.mw-phone-b .mw-status{background:none} /* phone B's calendar is a still picture behind the day sheet */
.mw-time{font:600 15px/1 -apple-system,BlinkMacSystemFont,"SF Pro Text",var(--mw-font);letter-spacing:-.01em}
.mw-sys{display:flex;align-items:center;gap:5px}
.mw-sys svg{fill:currentColor}
.mw-sig{width:17px;height:11px}
.mw-wifi{width:15px;height:11px}
.mw-batt{width:25px;height:12px}
.mw-view{height:100%;overflow-y:auto;padding:3.4rem 0 8.5rem;scrollbar-width:none}
.mw-view::-webkit-scrollbar{display:none}
.mw-title{margin:0 1.25rem;text-align:center;font:700 1.3rem/1.2 var(--mw-font);letter-spacing:0;color:#111}
.mw-girl{width:104px;height:auto;margin:.3rem auto .5rem}

/* Month carousel: previous and next months peek in at the sides */
.mw-months{display:grid;grid-template-columns:24% 1fr 24%;gap:.7rem;margin:0 -14%;padding:.2rem 0 .3rem}
.mw-month{padding:.6rem .55rem .7rem;border:1px solid #c9d6d4;border-radius:.6rem;background:#fff}
.mw-month.now{border-color:#8fb3af}
.mw-month.side{overflow:hidden;opacity:.85}
.mw-month.side .mw-m-grid{width:220px}
.mw-month.prev .mw-m-grid,.mw-month.prev .mw-m-head{margin-left:auto}
.mw-month.prev{display:flex;flex-direction:column;align-items:flex-end}
.mw-m-head{display:flex;align-items:center;justify-content:space-between;width:100%;margin-bottom:.4rem;font:500 .62rem/1 var(--mw-font);color:var(--mw-ink)}
.mw-month.side .mw-m-head{width:220px}
.mw-m-head button{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;color:#333}
.mw-m-head button:hover{background:#eef2f2}
.mw-m-head svg{width:12px;height:12px}
.mw-m-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:.28rem .2rem;text-align:center}
.mw-m-grid .dow{font:500 .55rem/1.6 var(--mw-font);color:#333}
.mw-day{display:grid;place-items:center;width:100%;aspect-ratio:1;max-width:22px;margin:auto;border-radius:4px;font:400 .58rem/1 var(--mw-font);color:#666;transition:transform .15s,box-shadow .15s}
button.mw-day:hover{transform:scale(1.12)}
.mw-day.m0,.mw-day.m1{color:#22312f}
.mw-day.m2,.mw-day.m3,.mw-day.m4{color:#fff}
.mw-day.today{font-weight:700;color:#111}
.mw-day.sel{box-shadow:0 0 0 1.5px #fff,0 0 0 3px var(--mw-teal)}
.mw-day.future{color:#bbb;cursor:default}

.mw-hint{margin:.55rem 1rem 0;text-align:center;font:400 .66rem/1.3 var(--mw-font);color:var(--mw-ink-3)}

/* Pie card */
.mw-card{margin:1.4rem 1rem 0;padding:1rem .9rem;border-radius:.4rem;background:#e9eeee}
.mw-card h4{margin-bottom:.7rem;font:500 .8rem/1.3 var(--mw-font);letter-spacing:0;color:#111}
.mw-pie-row{display:flex;align-items:center;gap:.4rem}
.mw-legend{flex:none;display:grid;gap:.35rem;padding-left:.6rem;font:400 .6rem/1.2 var(--mw-font);color:#333}
.mw-legend li{display:flex;align-items:center;gap:.6rem}
.mw-legend i,.mw-mood i,.mw-q i{flex:none;width:6px;height:6px;border-radius:50%}
.mw-pie{flex:1;min-width:0}
.mw-pie svg{width:100%;height:auto;overflow:visible}
.mw-pie text{font:400 7px var(--mw-font);fill:#fff;text-anchor:middle;dominant-baseline:middle}
.mw-pie text.dark{fill:#2c4a48}

/* Floating add button and bottom nav */
.mw-fab{position:absolute;right:1.4rem;bottom:5.4rem;z-index:3;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--mw-teal);color:#fff;box-shadow:0 8px 18px -6px rgba(63,110,106,.7);transition:transform .2s,background .2s}
.mw-fab:hover{transform:scale(1.07);background:var(--mw-teal-hi)}
.mw-fab svg{width:26px;height:26px}
.mw-nav{position:absolute;inset:auto 0 0;z-index:3;display:flex;justify-content:space-around;align-items:center;height:74px;padding-bottom:18px;border-radius:24px 24px 0 0;background:var(--mw-purple)}
.mw-nav button{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;color:#8f89a6;transition:color .2s,background .2s}
.mw-nav button:hover{color:#d9d5e8}
.mw-nav button[aria-current=page]{color:#fff}
.mw-nav svg{width:18px;height:18px}

/* Progress view */
.mw-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem;margin:1.2rem 1rem 0}
.mw-tiles div{padding:.7rem .5rem;border-radius:.5rem;background:#e9eeee;text-align:center}
.mw-tiles dt{font:400 .58rem/1.3 var(--mw-font);color:var(--mw-ink-2)}
.mw-tiles dd{margin-top:.25rem;font:600 1.15rem/1.1 var(--mw-font);color:var(--m4)}
.mw-bars{display:flex;align-items:flex-end;gap:3px;height:90px;padding-top:.3rem}
.mw-bars span{flex:1;min-height:3px;border-radius:3px 3px 0 0;background:#d3dcdb}
.mw-bars span.m0,.mw-bars span.m1,.mw-bars span.m2,.mw-bars span.m3,.mw-bars span.m4{height:var(--h)}
.mw-battles{display:grid;gap:.55rem}
.mw-battles li{display:grid;grid-template-columns:1fr auto;gap:.15rem .5rem;font:400 .72rem/1.3 var(--mw-font)}
.mw-battles b{font-weight:500;color:#111}
.mw-battles small{color:var(--mw-ink-3);font-size:.62rem}
.mw-trend{grid-row:span 2;align-self:center;padding:.2rem .5rem;border-radius:999px;font-size:.6rem;font-weight:500;background:#fff;color:var(--mw-ink-2)}
.mw-trend.up{color:#2f7d58}.mw-trend.down{color:#a24a3c}

/* Today view */
.mw-home-text{margin:.7rem 1.4rem 1.2rem;text-align:center;font:400 .78rem/1.5 var(--mw-font);color:var(--mw-ink-2)}
.mw-quick{display:grid;gap:.5rem;margin:0 1.2rem}
.mw-q{display:flex;align-items:center;gap:.8rem;padding:.75rem 1rem;border:1px solid var(--mw-line);border-radius:.8rem;background:#fff;font:500 .82rem/1 var(--mw-font);color:var(--mw-ink);transition:border-color .2s,transform .2s}
.mw-q:hover{border-color:var(--mw-teal);transform:translateX(3px)}
.mw-q i{width:12px;height:12px}
.mw-privacy{margin:1rem 1.4rem 0;text-align:center;font:400 .65rem/1.4 var(--mw-font);color:var(--mw-ink-3)}
.mw-game-link{display:flex;align-items:center;justify-content:center;gap:.4rem;margin:1rem 1.2rem 0;padding:.75rem;border-radius:.8rem;background:var(--mw-purple);color:#fff;font:500 .78rem/1.2 var(--mw-font)}

/* Bottom sheets: the entry form (phone A) and the day detail (phone B) */
.mw-sheet{position:absolute;inset:auto 0 0;z-index:6;max-height:88%;overflow-y:auto;padding:1.5rem 1.25rem 1.6rem;border-radius:26px 26px 0 0;background:#fff;box-shadow:0 -18px 40px -20px rgba(0,0,0,.3);scrollbar-width:thin}
.mw-form{animation:mw-up .35s var(--ease)}
.mw-screen.sheet-open::after{content:"";position:absolute;inset:0;z-index:4;background:rgba(40,40,44,.55)}
.mw-sheet-head{display:flex;align-items:center;justify-content:space-between}
.mw-sheet-head h4{font:600 1rem/1.2 var(--mw-font);letter-spacing:0;color:#111}
.mw-x{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;color:#555}
.mw-x:hover{background:#f1f3f3}
.mw-x svg,.mw-d-tools svg{width:16px;height:16px}
.mw-moods{display:grid;grid-template-columns:repeat(5,1fr);gap:.3rem}
.mw-mood{position:relative;display:flex;flex-direction:column;align-items:center;gap:.35rem;padding:.5rem .1rem;border:1px solid var(--mw-line);border-radius:.6rem;cursor:pointer;text-align:center;transition:border-color .2s,background .2s}
.mw-mood i{width:14px;height:14px}
.mw-mood span{font:400 .55rem/1.2 var(--mw-font);color:var(--mw-ink-2)}
.mw-mood:has(input:checked){border-color:var(--mw-teal);background:#eef6f5}
.mw-actions{display:flex;justify-content:flex-end;gap:.5rem;margin-top:1.2rem}
.mw-backdrop{position:absolute;inset:0;padding-top:3.6rem;filter:brightness(.42) saturate(.9);pointer-events:none}
.mw-backdrop .mw-title{margin-bottom:.2rem}
.mw-detail{min-height:56%;padding-top:1.9rem}
.mw-d-head{display:flex;align-items:center;justify-content:space-between}
.mw-d-mood{display:flex;align-items:center;gap:.6rem}
.mw-d-mood i{width:18px;height:18px;border-radius:50%}
.mw-d-mood b{font:500 .95rem/1.2 var(--mw-font);color:#111}
.mw-d-tools{display:flex;gap:.3rem}
.mw-d-tools button{display:grid;place-items:center;width:30px;height:30px;border-radius:8px;color:#333}
.mw-d-tools button:hover{background:#f1f3f3}
.mw-d-date{margin:.45rem 0 .2rem;font:400 .78rem/1.3 var(--mw-font);color:#222}
.mw-d-list dt{margin-top:1.15rem;font:400 .78rem/1.3 var(--mw-font);color:#111}
.mw-d-list dd{display:flex;flex-wrap:wrap;gap:.25rem 1rem;margin-top:.3rem;font:400 .72rem/1.45 var(--mw-font);color:var(--mw-ink-2);white-space:pre-line}
.mw-d-add .mw-btn{margin-top:1rem}

/* Feature points under the phones */
.mw-points{display:grid;gap:1rem;margin-top:4rem}
.mw-points li{padding:1.4rem 1.5rem;border:1px solid var(--mw-line);border-radius:1.25rem;background:rgba(255,255,255,.7)}
.mw-points h3,.mw-offers h3{font:600 1.05rem/1.3 var(--mw-font);letter-spacing:0;color:var(--mw-ink)}
.mw-points p,.mw-offers p{margin-top:.4rem;font-size:.92rem;line-height:1.6;color:var(--mw-ink-2)}

@media (min-width:768px){.mw-points{grid-template-columns:repeat(3,1fr)}}
@media (max-width:720px){.mw-phone-b{margin-top:0}}
@media (max-width:380px){.mw-phone{height:670px;border-radius:47px;padding:6px}.mw-screen{border-radius:38px}.mw-island{top:16px}.mw-home{bottom:13px}}
@keyframes mw-up{from{transform:translateY(40px);opacity:0}to{transform:none;opacity:1}}