/* Styles 3/8 (lines 484–685 of styles.css until v122) — onboarding, empty chat, My progress, streak, activity calendar, celebration.
   Order matters (a later rule wins): index.html loads css/1-… → css/8-… in this order; see docs/REFACTOR.md step 4. */
/* ONBOARDING: full-screen guide on first launch (and from Settings → "How to use") */
.onb{
  position:fixed; inset:0; z-index:20; background:var(--bg); display:flex; flex-direction:column;
  padding:calc(var(--safe-top) + 8px) calc(var(--safe-right) + 20px) calc(var(--safe-bottom) + 16px) calc(var(--safe-left) + 20px);
  animation:fade-in .25s ease;
}
.onb[hidden]{display:none;}
.onb-top{display:flex; justify-content:flex-end; min-height:40px;}
/* Centred when short, scrollable from the very top when long (justify-content:center would cut the top off). */
.onb-body{flex:1; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch; display:flex; flex-direction:column; padding:8px 0;}
.onb-step{margin:auto 0; animation:onb-in .35s cubic-bezier(.2,.8,.2,1);}
.onb-step.back{animation-name:onb-in-back;}
@keyframes onb-in{from{opacity:0; transform:translateX(26px);} to{opacity:1; transform:none;}}
@keyframes onb-in-back{from{opacity:0; transform:translateX(-26px);} to{opacity:1; transform:none;}}
.onb-hero{width:72px; height:72px; border-radius:var(--r-lg); background:var(--accent-dim); color:var(--accent); display:flex; align-items:center; justify-content:center; margin-bottom:22px;}
.onb-hero svg{width:38px; height:38px; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round;}
.onb-goose{margin-bottom:18px;}
.onb-goose svg{display:block; border-radius:50%; box-shadow:0 8px 24px rgba(79,143,224,.35);}
.onb-goose.big svg{animation:goose-hop 1.4s .3s ease-in-out;}
@keyframes goose-hop{0%,100%{transform:none;} 20%{transform:translateY(-8px) rotate(-6deg);} 40%{transform:none;} 55%{transform:translateY(-4px) rotate(4deg);} 70%{transform:none;}}
.onb h2{font-size:27px; line-height:1.2; margin:0 0 12px; letter-spacing:-.01em;}
.onb p{font-size:16px; line-height:1.5; margin:0 0 12px; color:var(--text);}
.onb .onb-note{font-size:13.5px; color:var(--muted);}
.onb-list{display:flex; flex-direction:column; gap:14px; margin-top:8px;}
.onb-item{display:flex; gap:14px; align-items:flex-start;}
.onb-item .ic{flex:0 0 40px; height:40px; border-radius:var(--r); background:var(--panel-2); border:1px solid var(--line); display:flex; align-items:center; justify-content:center; color:var(--accent);}
.onb-item .ic.emoji{font-size:21px; line-height:1;}
.onb-item .ic svg{width:22px; height:22px; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round;}
.onb-item b{display:block; font-size:15.5px; margin-bottom:2px;}
.onb-item span{font-size:14px; line-height:1.45; color:var(--muted);}
.onb-archs{display:flex; flex-direction:column; gap:7px; margin-top:4px;}
.onb-arch{
  text-align:left; background:var(--panel-2); border:1.5px solid var(--line); border-radius:var(--r); padding:9px 13px;
  color:var(--text); cursor:pointer; font:inherit; transition:border-color .15s ease, transform .15s ease;
}
.onb-arch:active{transform:scale(.98);}
.onb-arch{display:flex; gap:11px; align-items:flex-start;}
.onb-av{flex:0 0 auto; width:42px; height:42px; border-radius:50%; overflow:hidden; display:block; margin-top:1px;}
.onb-av svg{width:100%; height:100%; display:block;}
.onb-arch-text{flex:1; min-width:0; display:block;}
.onb-arch.on{border-color:var(--accent-fill); background:var(--goal-bg);}
.onb-arch .nm{font-weight:600; font-size:15.5px; display:flex; align-items:center; gap:8px;}
.onb-arch .tag{font-size:11px; font-weight:500; color:var(--accent); border:1px solid var(--chip-border); border-radius:var(--r-pill); padding:1px 8px;}
.onb-arch .ds{font-size:13.5px; color:var(--muted); margin-top:2px; line-height:1.4;}
.onb-arch .qt{font-size:13.5px; margin-top:4px; font-style:italic; color:var(--user-text);}
.onb-arch:not(.on) .ds{display:none;} /* the description only for the chosen style — keeps the list short */
.onb-label{display:block; margin:18px 0 6px; font-size:14px; font-weight:600; color:var(--text);}
.onb #onb-name + .onb-note{margin-top:6px;}
.onb .onb-list + .onb-note{margin-top:18px;}
.onb-status{font-size:14.5px; margin-top:6px;}
.onb-status.ok{color:var(--ok);}
.onb-foot{flex:0 0 auto; display:flex; flex-direction:column; gap:14px; padding-top:10px;}
.onb-dots{display:flex; justify-content:center; gap:7px;}
.onb-dots i{width:7px; height:7px; border-radius:50%; background:var(--line); transition:background .2s ease, width .2s ease;}
.onb-dots i.on{background:var(--accent-fill); width:20px; border-radius:4px;}
.onb-btns{display:flex; gap:10px;}
.onb-btns button{flex:1; padding:14px 16px; font-size:16px; border-radius:var(--r);}
.onb-btns .ghost-btn{flex:0 0 auto;}
.onb .primary-btn.big{width:100%; padding:14px 16px; font-size:16px; border-radius:var(--r); margin-top:8px;}

/* Empty chat: the manager says hello */
.chat-empty{margin:auto; max-width:300px; text-align:center; display:flex; flex-direction:column; align-items:center; gap:6px; padding:20px 10px; animation:fade-in .4s ease;}
.chat-empty .hdr-avatar.big{width:84px; height:84px; margin-bottom:8px; box-shadow:0 6px 20px rgba(0,0,0,.3);}
.chat-empty .hdr-avatar.big svg.avatar{width:100%; height:100%;}
.chat-empty b{font-size:18px;}
.chat-empty p{margin:0; color:var(--muted); font-size:14.5px; line-height:1.5;}

/* MY PROGRESS */
.goal-complete{margin-top:16px; display:flex; flex-direction:column; gap:8px; align-items:flex-start;}
.goal-complete:empty{display:none;}
.goal-complete .big-btn{width:100%; padding:13px 16px; font-size:15px;}
.goal-done-note{margin:0; color:var(--ok); font-weight:600; font-size:15px;}
.lvl-card{
  width:100%; text-align:left; cursor:pointer; color:var(--text); font:inherit;
  background:linear-gradient(135deg, rgba(155,92,246,.22), rgba(155,92,246,.05) 60%), var(--panel-2);
  border:1px solid rgba(155,92,246,.45); border-radius:var(--r-lg); padding:16px; display:flex; flex-direction:column; gap:12px;
}
.lvl-card:active{transform:scale(.99);}
.lvl-top{display:flex; align-items:center; gap:14px;}
.lvl-badge{flex:0 0 auto; filter:drop-shadow(0 4px 10px rgba(155,92,246,.45));}
.lvl-text{flex:1;}
.lvl-label{font-size:13px; color:var(--muted); text-transform:uppercase; letter-spacing:.06em;}
.lvl-num{font-size:46px; font-weight:800; line-height:1; letter-spacing:-.02em;}
.lvl-more{font-size:13px; color:var(--accent); align-self:flex-start; white-space:nowrap;}
.lvl-bar{height:10px; border-radius:6px; background:var(--panel); overflow:hidden; border:1px solid var(--line);}
.lvl-bar i{display:block; height:100%; background:linear-gradient(90deg, #9b5cf6, #d6b4ff); border-radius:6px; transition:width .6s cubic-bezier(.2,.8,.2,1);}
.lvl-sub{font-size:14px; color:var(--muted);}
.lvl-sub b{color:var(--text);}
.lvl-rank{font-size:13px; font-weight:600; color:#c9a8ff; margin-top:4px;}
.weekend-picker button{font-size:13px; padding:10px 2px; text-transform:capitalize;}
/* Streak */
.streak-card{
  display:flex; align-items:center; gap:12px; margin-top:12px; padding:12px 14px; border-radius:var(--r-lg);
  background:linear-gradient(135deg, rgba(255,122,47,.22), rgba(255,122,47,.04) 65%), var(--panel-2); border:1px solid rgba(255,122,47,.45);
}
.streak-card.zero{background:var(--panel-2); border-color:var(--line);}
.streak-fire{font-size:34px; line-height:1;}
.streak-card.zero .streak-fire{filter:grayscale(1); opacity:.5;}
.streak-text{flex:1; min-width:0;}
.streak-num{font-size:20px; font-weight:800;}
.streak-sub{font-size:12.5px; color:var(--muted); margin-top:2px; text-transform:none;}
.streak-frz{display:flex; gap:3px;}
.frz{font-size:20px; filter:grayscale(1); opacity:.3;}
.frz.on{filter:none; opacity:1;}
.streak-hint{margin:6px 2px 0;}
.goose-says{display:flex; align-items:flex-end; gap:8px; margin-top:10px;}
.goose-says svg{flex:0 0 auto; display:block; border-radius:50%;}
.goose-says span{background:var(--panel-2); border:1px solid var(--line); border-radius:var(--r) var(--r) var(--r) var(--r-tail); padding:9px 12px; font-size:14px; line-height:1.4;}
.prog-h{font-size:15px; margin:20px 0 8px;}
/* Activity calendar (until v96 a GitHub-like weeks grid) */
/* v97: a plain month calendar (progress.js calendarHtml) */
.cal-month{background:var(--panel); border:1px solid var(--line); border-radius:var(--r); padding:10px 12px 12px;}
.cal-nav{display:flex; align-items:center; justify-content:space-between; margin-bottom:8px;}
.cal-nav b{font-size:15.5px;}
.cal-nav .icon-btn:disabled{opacity:.3; cursor:default;}
.cal-heads, .cal-days{display:grid; grid-template-columns:repeat(7, 1fr); gap:4px; text-align:center;}
.cal-heads span{font-size:11px; color:var(--muted); text-transform:capitalize; padding-bottom:2px;}
.cal-days i{display:flex; align-items:center; justify-content:center; aspect-ratio:1; max-height:42px; margin:0 auto; width:100%;
  border-radius:50%; font-style:normal; font-size:13px; color:var(--text); background:var(--panel-2); cursor:pointer;}
.cal-days i.l1{background:rgba(111,174,124,.35);}
.cal-days i.l2{background:rgba(111,174,124,.65);}
.cal-days i.l3{background:#6fae7c; color:#10301a; font-weight:600;}
.cal-days i.frozen{background:#7cc4ff; color:#0b2a40;}
.cal-days i.off{background:transparent; color:var(--muted); border:1px dashed var(--line);}
.cal-days i.future{background:transparent; color:var(--muted); opacity:.45; cursor:default;}
.cal-days i.today{box-shadow:0 0 0 2px var(--accent-fill);}
.cal-foot{display:flex; align-items:center; justify-content:space-between; gap:8px; flex-wrap:wrap; margin-top:10px; font-size:12px; color:var(--muted);}
.cal-legend{display:inline-flex; align-items:center; gap:4px;}
.cal-legend i{display:inline-flex; align-items:center; justify-content:center; width:12px; height:12px; border-radius:50%; font-style:normal; font-size:8px;}
.cal-legend i.l1{background:rgba(111,174,124,.35);} .cal-legend i.l2{background:rgba(111,174,124,.65);} .cal-legend i.l3{background:#6fae7c;}
.cal-legend i.frozen{background:#7cc4ff; margin-left:6px;}
/* Friends & leaderboard — coming soon */
.soon-card{margin-top:12px; padding:14px; border-radius:var(--r-lg); border:1px dashed var(--line); background:var(--panel-2); position:relative; overflow:hidden;}
.soon-head{display:flex; align-items:center; justify-content:space-between; gap:8px; font-size:15.5px;}
.soon-tag{font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--on-accent); background:var(--accent-fill); border-radius:var(--r-pill); padding:3px 9px;}
.soon-card p{font-size:13.5px; color:var(--muted); margin:6px 0 10px; line-height:1.45;}
.soon-rows{display:flex; flex-direction:column; gap:6px; opacity:.45; filter:blur(1.2px);}
.soon-row{display:flex; align-items:center; gap:8px; font-size:12px; color:var(--muted);}
.soon-row i{width:22px; height:22px; border-radius:50%; background:var(--line);}
.soon-row em{flex:1; height:8px; border-radius:4px; background:var(--line);}
.soon-row:nth-child(2) em{flex:.75;} .soon-row:nth-child(3) em{flex:.5;}
.stat-grid{display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:16px;}
.stat{background:var(--panel-2); border:1px solid var(--line); border-radius:var(--r); padding:12px; min-width:0;}
.stat-label{font-size:12px; color:var(--muted); margin-bottom:4px;}
.stat-value{font-size:20px; font-weight:700; line-height:1.25; word-break:break-word; display:flex; align-items:center; gap:6px;}
.stat-value:not(:only-child){font-size:15.5px;}
.stat-extra{font-size:12px; color:var(--muted); margin-top:3px;}
.mini-badge{display:inline-flex; flex:0 0 auto;}
.ach-row{margin-top:12px;}
.hint-inline{color:var(--muted); font-size:13px; margin-left:6px;}
.ach-h{font-size:15px; margin:22px 0 10px;}
.ach-h:first-child{margin-top:4px;}
.ach-list{display:flex; flex-direction:column; gap:8px;}
.ach{display:flex; gap:12px; align-items:center; background:var(--panel-2); border:1px solid var(--line); border-radius:var(--r); padding:10px 12px;}
.ach svg{flex:0 0 auto;}
.ach-text{flex:1; min-width:0;}
.ach-name{font-weight:700; font-size:15px;}
.ach.locked .ach-name{color:var(--muted); letter-spacing:.15em;}
.ach-desc{font-size:13.5px; color:var(--text); margin-top:1px;}
.ach.locked .ach-desc{color:var(--muted);}
.ach-date{font-size:12px; color:var(--muted); margin-top:3px;}
.ach-prog{height:5px; border-radius:3px; background:var(--panel); margin-top:6px; overflow:hidden;}
.ach-prog i{display:block; height:100%; background:var(--muted);}

/* CELEBRATION (full screen) */
.celebrate{
  position:fixed; inset:0; z-index:30; display:flex; align-items:center; justify-content:center;
  padding:calc(var(--safe-top) + 20px) 24px calc(var(--safe-bottom) + 20px);
  background:radial-gradient(circle at 50% 36%, var(--cel-glow, rgba(242,182,48,.35)), transparent 62%), rgba(12,11,16,.97);
}
.celebrate[hidden]{display:none;}
.celebrate[data-metal="bronze"]{--cel-glow:rgba(194,124,62,.42);}
.celebrate[data-metal="silver"]{--cel-glow:rgba(191,198,210,.38);}
.celebrate[data-metal="gold"]{--cel-glow:rgba(242,182,48,.42);}
.celebrate[data-metal="purple"]{--cel-glow:rgba(155,92,246,.45);}
.celebrate[data-metal="special"]{--cel-glow:rgba(34,184,207,.42);}
.celebrate.show{animation:fade-in .3s ease;}
#confetti{position:absolute; inset:0; width:100%; height:100%; pointer-events:none;}
.cel-card{position:relative; text-align:center; color:#fff; max-width:360px; display:flex; flex-direction:column; align-items:center;}
.cel-kicker{font-size:14px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.8);}
.cel-badge{margin:18px 0 14px; filter:drop-shadow(0 10px 30px rgba(0,0,0,.5));}
.celebrate.show .cel-badge{animation:cel-pop .9s cubic-bezier(.2,1.4,.4,1);}
@keyframes cel-pop{0%{transform:scale(.2) rotate(-25deg); opacity:0;} 60%{transform:scale(1.12) rotate(6deg); opacity:1;} 100%{transform:none;}}
.cel-name{font-size:30px; line-height:1.15; margin:0 0 8px; font-weight:800;}
.celebrate.show .cel-name, .celebrate.show .cel-desc, .celebrate.show .cel-btns{animation:onb-in .5s .35s both cubic-bezier(.2,.8,.2,1);}
.cel-desc{font-size:16px; line-height:1.45; color:rgba(255,255,255,.82); margin:0 0 18px;}
/* The Goose comments on the achievement */
.cel-goose{display:flex; align-items:center; gap:10px; margin:0 0 22px; text-align:left;}
.cel-goose svg{display:block; border-radius:50%;}
.cel-goose-line{background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.18); border-radius:var(--r) var(--r) var(--r) var(--r-tail); padding:8px 12px; font-size:14.5px; line-height:1.35; color:#fff;}
.celebrate.show .cel-goose{animation:onb-in .5s .55s both cubic-bezier(.2,.8,.2,1);}
.cel-btns{display:flex; flex-direction:column; gap:10px; width:100%; min-width:260px;}
.cel-btns button{padding:14px 16px; font-size:16px; border-radius:var(--r);}
.cel-btns .ghost-btn{color:#fff; border-color:rgba(255,255,255,.3);}
#share-sheet{z-index:32;}
.share-grid{display:grid; grid-template-columns:1fr 1fr; gap:8px;}
.share-link{text-align:center; text-decoration:none; color:var(--text); display:block;}
.share-grid .hint{grid-column:1 / -1;}