/* Habit Hamlet demo UI. Everything lives inside #stage and scales with it (container query units). */
#stage{container-type:inline-size;font-family:var(--display);color:var(--ink);background:#CDE9F5}
#stage button{font-family:var(--display);-webkit-tap-highlight-color:transparent}
.hh{position:absolute;inset:0;overflow:hidden}
.hh-cv{position:absolute;inset:0;width:100%;height:100%;display:block}

/* HUD */
.hh-hud{position:absolute;top:3cqw;left:3cqw;right:3cqw;display:flex;justify-content:space-between;align-items:flex-start;pointer-events:none;transition:opacity .6s}
.hh-hud.away{opacity:0}
.hh-day{display:flex;align-items:center;gap:1.4cqw;padding:1.3cqw 3cqw 1.3cqw 3.2cqw;border-radius:99px;background:rgba(255,255,255,.88);box-shadow:0 .8cqw 0 rgba(47,59,42,.12);font-weight:600}
.hh-dl{font-size:max(12px,3.4cqw);color:var(--mid)}
.hh-day b{font-size:max(18px,5.6cqw);line-height:1;display:inline-block;min-width:.6em;text-align:center}
.hh-of{font-size:max(11px,3cqw);color:var(--mid);margin-right:.8cqw}
.hh-pips{display:flex;gap:.9cqw}
.hh-pips i{width:max(7px,2cqw);height:max(7px,2cqw);border-radius:50%;background:rgba(47,59,42,.14);transition:background .3s,transform .3s}
.hh-pips i.part{background:#B9DDA0}
.hh-pips i.full{background:#5FA544}
.hh-pips i.today{background:var(--accent);transform:scale(1.25)}
.hh-snd{pointer-events:auto;width:max(40px,10cqw);height:max(40px,10cqw);border-radius:50%;border:0;background:rgba(255,255,255,.88);color:var(--mid);display:grid;place-items:center;cursor:pointer;box-shadow:0 .8cqw 0 rgba(47,59,42,.12)}
.hh-snd svg{width:55%;height:55%}
.hh-snd:focus-visible,.hh-habit:focus-visible,.hh-next:focus-visible{outline:3px solid var(--ink);outline-offset:2px}

/* toast + summary */
.hh-toast{position:absolute;left:50%;bottom:calc(var(--ph,40cqw) + 2.6cqw);transform:translate(-50%,2cqw) scale(.96);opacity:0;max-width:94cqw;width:max-content;text-align:center;padding:1.8cqw 3.6cqw;border-radius:99px;background:rgba(255,255,255,.95);box-shadow:0 1.2cqw 3cqw rgba(30,40,30,.18);font-size:max(13px,3.4cqw);line-height:1.25;pointer-events:none;transition:opacity .3s,transform .35s cubic-bezier(.3,1.5,.5,1)}
.hh-toast.show{opacity:1;transform:translate(-50%,0) scale(1)}
.hh-toast b{color:var(--accent)}
.hh-toast svg{width:1.1em;height:1.1em;vertical-align:-.17em;color:var(--accent)}
.hh-sum{position:absolute;left:6cqw;right:6cqw;top:5cqw;z-index:2;padding:3cqw 3cqw 2.6cqw;border-radius:5cqw;background:rgba(255,255,255,.95);box-shadow:0 1.6cqw 4cqw rgba(30,40,30,.2);text-align:center;opacity:0;transform:translateY(-4cqw) scale(.9);pointer-events:none;transition:opacity .4s,transform .5s cubic-bezier(.3,1.5,.5,1)}
.hh-sum.show{opacity:1;transform:none}
.hh-sum small{display:block;font-size:max(11px,3.1cqw);letter-spacing:.12em;text-transform:uppercase;color:var(--mid);font-weight:600}
.hh-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1cqw;margin-top:1.4cqw}
.hh-stats div{display:flex;flex-direction:column;align-items:center}
.hh-stats b{font-size:max(22px,7.6cqw);line-height:1.05;color:var(--ink)}
.hh-stats div:nth-child(2) b{color:var(--accent)}
.hh-stats span{font-size:max(11px,3.1cqw);color:var(--mid)}
.hh-sum p{margin:1.6cqw 0 0;font-size:max(12px,3.3cqw);color:#5FA544;font-weight:600}

/* habit panel */
.hh-panel{position:absolute;left:0;right:0;bottom:0;padding:2.6cqw 2.6cqw 3cqw;border-radius:5.5cqw 5.5cqw 0 0;background:var(--panel);box-shadow:0 -1.2cqw 4cqw rgba(30,50,30,.16);transition:transform .9s cubic-bezier(.5,0,.3,1)}
.hh-panel.away{transform:translateY(112%)}
.hh-habits{display:grid;grid-template-columns:repeat(5,1fr);gap:1.8cqw}
.hh-habit{position:relative;appearance:none;margin:0;min-height:max(70px,20cqw);padding:2.4cqw .6cqw 1.8cqw;border:2px solid var(--line);border-radius:4.2cqw;background:#F7FAF4;color:var(--ink);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.2cqw;cursor:pointer;touch-action:manipulation;transition:background .25s,border-color .25s,opacity .3s,box-shadow .25s;box-shadow:0 .9cqw 0 rgba(47,59,42,.08)}
.hh-habit:hover{border-color:color-mix(in srgb,var(--hc) 50%,transparent)}
.hh-habit:disabled{cursor:default}
.hh.locked .hh-habit{opacity:.72}
.hh-ico{width:max(32px,9.6cqw);height:max(32px,9.6cqw);border-radius:50%;background:var(--hs);display:grid;place-items:center;transition:transform .3s}
.hh-ico svg{width:68%;height:68%}
.hh-lbl{font-size:max(12px,3.4cqw);font-weight:600;line-height:1;white-space:nowrap}
.hh-habit.on{background:var(--hs);border-color:var(--hc);box-shadow:0 .9cqw 0 color-mix(in srgb,var(--hc) 35%,transparent)}
.hh-habit.on .hh-ico{background:#fff;transform:scale(1.06)}
.hh-tick{position:absolute;top:-1.4cqw;left:-1.2cqw;width:max(20px,5.6cqw);height:max(20px,5.6cqw);border-radius:50%;background:var(--hc);display:grid;place-items:center;transform:scale(0);transition:transform .3s cubic-bezier(.3,1.8,.5,1);box-shadow:0 0 0 2px #fff}
.hh-tick svg{width:72%;height:72%}
.hh-habit.on .hh-tick{transform:scale(1)}
.hh-streak{position:absolute;top:.9cqw;right:1.1cqw;display:flex;align-items:center;gap:.2cqw;font-size:max(11px,3.1cqw);font-weight:700;color:#D9622B;line-height:1}
.hh-streak svg{width:max(10px,2.8cqw);height:auto}
.hh-streak.big svg{width:max(12px,3.4cqw)}
.hh-streak .zz{color:#6C79CF;font-weight:700;font-size:max(12px,3.4cqw);letter-spacing:-.04em}
.hh-streak .zz i{font-style:normal;font-size:.75em;vertical-align:.5em}
.hh-habit.rest{border-style:dashed;border-color:#B7BEE8}
.hh-habit kbd{position:absolute;top:1cqw;left:1.4cqw;font:600 max(10px,2.6cqw) var(--display);color:var(--mid);opacity:0}
@media (hover:hover) and (pointer:fine){.hh-habit kbd{opacity:.55}.hh-habit.on kbd{opacity:0}}
.hh-foot{display:flex;align-items:center;gap:2.4cqw;margin-top:2.4cqw}
.hh-log{flex:1;min-width:0;margin:0;min-height:max(40px,11cqw);display:flex;align-items:center;gap:1.8cqw;font-size:max(12.5px,3.5cqw);line-height:1.22;color:var(--mid)}
.hh-log b{color:var(--ink)}
.hh-li{flex:none;width:max(26px,7.4cqw);height:max(26px,7.4cqw);border-radius:50%;background:var(--hs);display:grid;place-items:center}
.hh-li svg{width:70%;height:70%}
.hh-next{flex:none;display:flex;align-items:center;gap:1.4cqw;min-height:max(44px,11.4cqw);padding:0 3.6cqw 0 4cqw;border:0;border-radius:3.4cqw;background:var(--accent);color:var(--accent-ink);font-size:max(14px,4cqw);font-weight:600;cursor:pointer;box-shadow:0 1cqw 0 #C46E24;transition:transform .12s,box-shadow .12s,opacity .3s}
.hh-next svg{width:max(15px,4.2cqw);height:max(15px,4.2cqw)}
.hh-next:active{transform:translateY(.8cqw);box-shadow:0 .2cqw 0 #C46E24}
.hh-next:disabled{opacity:.6;cursor:default}
.hh-next.ready{animation:hh-glow 1.1s ease-in-out infinite}
@keyframes hh-glow{50%{box-shadow:0 1cqw 0 #C46E24,0 0 0 1.6cqw rgba(229,138,58,.22)}}

/* flying habit icon, pointer, ripple */
.hh-fly{position:absolute;z-index:3;width:max(34px,9.6cqw);height:max(34px,9.6cqw);border-radius:50%;background:#fff;border:2px solid var(--hc);display:grid;place-items:center;pointer-events:none;box-shadow:0 1cqw 2.4cqw rgba(30,40,30,.25)}
.hh-fly svg{width:68%;height:68%}
.hh-pointer{position:absolute;left:0;top:0;z-index:5;margin:-.4cqw 0 0 -3.6cqw;pointer-events:none;display:none;filter:drop-shadow(0 .8cqw .8cqw rgba(0,0,0,.22))}
.hh-pointer.show{display:block}
.hh-pointer svg{display:block;width:max(30px,8.6cqw);height:auto;transform-origin:40% 10%;transition:transform .09s}
.hh-pointer.press svg{transform:scale(.84) rotate(-6deg)}
.hh-pointer.hint svg{animation:hh-nudge 1.2s ease-in-out infinite}
@keyframes hh-nudge{0%,100%{transform:translate(0,0)}50%{transform:translate(-1.4cqw,-2.4cqw)}}
.hh-ripple{position:absolute;z-index:4;width:12cqw;height:12cqw;margin:-6cqw 0 0 -6cqw;border-radius:50%;border:3px solid rgba(255,255,255,.95);pointer-events:none;animation:hh-rip .45s ease-out forwards}
@keyframes hh-rip{from{transform:scale(.2);opacity:1}to{transform:scale(1);opacity:0}}

/* end card: the zoomed-out hamlet stays visible above the call to action */
#stage #cta.hh-cta{justify-content:flex-end;gap:2.2cqw;padding:0 5cqw 6cqw;background:linear-gradient(to bottom,rgba(238,245,233,0) 0%,rgba(238,245,233,0) 56%,rgba(238,245,233,.92) 68%,rgba(238,245,233,.97) 100%)}
#stage #cta.hh-cta h2{font-size:max(23px,7.4cqw);font-weight:700;color:var(--ink)}
#stage #cta.hh-cta p{font-size:max(13.5px,3.8cqw);max-width:80cqw;color:var(--mid)}
.hh-ctarow{display:flex;flex-wrap:wrap;gap:2.4cqw;justify-content:center;margin-top:1cqw}
#stage .hh-ctarow .btn{font-size:max(15px,4.2cqw);padding:max(11px,3cqw) max(16px,4.6cqw)}
@media (prefers-reduced-motion:reduce){.hh-pointer.hint svg{animation:none}}