/* =============================================================================
   Zikry v2: glass, springs and milestones. Linked after design.css (unlayered, so
   it wins at equal specificity). Rules are scoped to html.zk-v2 (motion.js) or to
   new components, so removing this file and its two scripts restores v1 exactly.
   ========================================================================== */
:root{
  --smooth:cubic-bezier(.32,.72,0,1);
  --spring-l:linear(0,.009,.035 2.1%,.141,.281 6.7%,.723 12.9%,.938 16.7%,1.017,1.077 24.3%,1.096 28%,1.077 33.6%,1.019 46%,.994 53.3%,1.003 70%,1);
  --glass-bar:rgb(255 255 255/.62);--glass-edge:rgb(255 255 255/.85);--glass-ring:rgb(15 27 51/.10);
  /* Medal metals (own palette) */
  --bronze-1:#F2C39A;--bronze-2:#C27A45;--bronze-3:#7E4320;
  --silver-1:#FFFFFF;--silver-2:#C9D1DE;--silver-3:#7D8799;
  --gold-1:#FFF1C4;--gold-2:#E8B54F;--gold-3:#9A6512;
  --rose-1:#FBE3DF;--rose-2:#D79A92;--rose-3:#8E5550;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--glass-bar:rgb(28 34 52/.58);--glass-edge:rgb(255 255 255/.16);--glass-ring:rgb(255 255 255/.08)}}
:root[data-theme="dark"]{--glass-bar:rgb(28 34 52/.58);--glass-edge:rgb(255 255 255/.16);--glass-ring:rgb(255 255 255/.08)}

/* ---- Glass tab bar that shrinks while scrolling down ---- */
.zk-v2 .nav-in{transition:transform .45s var(--smooth);transform-origin:50% 100%}
.zk-v2 .nav-in::before{background:var(--glass-bar);
  box-shadow:inset 0 1px 0 var(--glass-edge),0 0 0 .5px var(--glass-ring),0 12px 32px -14px rgba(5,15,40,.42)}
.zk-v2 .nav-in>.tab:not(.fab)>span{transition:opacity .25s var(--smooth)}
.zk-v2.zk-nav-compact .nav-in{transform:scale(.88) translateY(4px)}
.zk-v2.zk-nav-compact .nav-in>.tab:not(.fab)>span{opacity:.0}
.zk-v2 .nav-in>.tab{position:relative;z-index:1;transition:transform .3s var(--spring-l)}
/* The bar's ::before is its own layer (glass.css); keep the tabs painted above it. */
.zk-v2 .nav-in::before{position:relative;z-index:0}
.zk-v2 .nav-in>.tab:active{transform:scale(.9)}

/* ---- Press feedback on Today's tappable cards ---- */
.zk-v2 #main :is(button.card,.resume-main,.today-date,.adh-now-main,.zst-cta){transition:transform .35s var(--spring-l)}
.zk-v2 #main :is(button.card,.resume-main,.today-date,.adh-now-main):active{transform:scale(.97);transition-duration:.12s}

/* ---- Today's cards rise in once per visit ---- */
.zk-rise>*{animation:zk-rise .55s var(--smooth) both;animation-delay:calc(var(--rise,0) * 45ms)}
@keyframes zk-rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* ---- Milestones row ---- */
.zkm-section{margin:18px 0 6px;min-width:0;max-width:100%}
/* Statistics lays its panels out in a grid: keep the sideways row from widening the column (it pushed every panel off screen). */
.stats-page>.zkm-section{grid-column:1/-1;width:auto}
.zkm-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding-inline:var(--gutter)}
.zkm-title{margin:0 0 2px;font-size:var(--t-title3);font-weight:700}
.zkm-all{min-height:44px;padding:0 2px;border:0;background:none;color:var(--tint);font:inherit;font-size:var(--t-subhead);cursor:pointer}
.zkm-sub{margin:0 0 10px;padding-inline:var(--gutter);color:var(--label-3);font-size:var(--t-footnote)}
.zkm-row{min-width:0;max-width:100%;display:flex;gap:8px;margin:0;padding:2px var(--gutter) 10px;list-style:none;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gutter);scrollbar-width:none;-webkit-overflow-scrolling:touch}
.zkm-row::-webkit-scrollbar{display:none}
.zkm-card{flex:none;width:118px;scroll-snap-align:start}
.zkm-btn{display:grid;justify-items:center;gap:2px;width:100%;padding:0 0 4px;border:0;background:none;color:var(--label);text-align:center;cursor:pointer;font:inherit;
  transition:transform .35s var(--spring-l);-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.zkm-btn:active{transform:scale(.94);transition-duration:.12s}
.zkm-btn:focus-visible{outline:3px solid var(--tint);outline-offset:4px;border-radius:16px}
.zkm-btn>strong{margin-top:4px;font-size:var(--t-footnote);font-weight:600;line-height:1.25;letter-spacing:-.01em}
.zkm-meta{font-size:var(--t-caption);color:var(--label-3);font-variant-numeric:tabular-nums}
.zkm-bronze{--m1:var(--bronze-1);--m2:var(--bronze-2);--m3:var(--bronze-3)}
.zkm-silver{--m1:var(--silver-1);--m2:var(--silver-2);--m3:var(--silver-3)}
.zkm-gold{--m1:var(--gold-1);--m2:var(--gold-2);--m3:var(--gold-3)}
.zkm-rose{--m1:var(--rose-1);--m2:var(--rose-2);--m3:var(--rose-3)}
.zkm-stage{position:relative;display:grid;place-items:center;width:112px;height:118px}
.zkm-ed{font-size:var(--t-caption);color:var(--label-3);font-variant-numeric:tabular-nums}
/* Placeholder art until window.ZikryMedalArt is present: a plain disc in the family colour with a metal rim. */
.zkm-disc{display:block;width:84%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 35% 30%,color-mix(in srgb,var(--fam) 55%,#fff),var(--fam) 60%,color-mix(in srgb,var(--fam) 70%,#000));box-shadow:0 0 0 4px var(--m2,#bbb),0 6px 14px -6px rgba(0,0,0,.45)}
.zkm-disc>i{display:none}
.is-locked .zkm-disc{filter:grayscale(1);opacity:.38}
.zkm-bar{display:block;height:4px;margin-top:6px;border-radius:999px;background:rgba(255,255,255,.16);overflow:hidden}
.zkm-bar i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#F3D493,#E8B54F)}

/* Account photo in the You header (screens.js shows only the initial). */
.yv-avatar.has-photo{position:relative;overflow:hidden;color:transparent}
.yv-avatar.has-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:50%}
.yv-avatar.has-photo img[hidden]{display:none}
.yv-avatar.has-photo:has(img[hidden]){color:var(--on-tint)}

/* Newest medal frames the profile picture: avatar (44) inside a ring of that metal (60). */
.zkm-avatar{position:relative;flex:none;display:grid;place-items:center;width:60px;height:60px;margin-inline-end:-2px;padding:0;border:0;border-radius:50%;background:none;cursor:pointer;
  -webkit-tap-highlight-color:transparent;transition:transform .35s var(--spring-l)}
.zkm-ring,.zkm-ring-art{position:absolute;inset:0;border-radius:50%}
.zkm-ring{background:conic-gradient(from 200deg,var(--m1),var(--m2),var(--m3),var(--m2),var(--m1));box-shadow:0 2px 6px color-mix(in srgb,var(--m3) 50%,transparent)}
.zkm-ring-art>*{width:100%;height:100%}
.zkm-avatar>.yv-avatar{position:relative;margin:0;box-shadow:0 0 0 1.5px color-mix(in srgb,var(--m1) 80%,#fff)}
.zkm-avatar:active{transform:scale(.94);transition-duration:.12s}
.zkm-avatar:focus-visible{outline:3px solid var(--tint);outline-offset:2px}

/* ---- All milestones page ---- */
.zkm-allpage{position:fixed;inset:0;z-index:1000;overflow-y:auto;overscroll-behavior:contain;padding:calc(env(safe-area-inset-top) + 8px) 0 calc(env(safe-area-inset-bottom) + 32px);background:var(--bg);color:var(--label);animation:zkm-in .3s var(--smooth)}
.zkm-allpage[hidden]{display:none}
.zkm-allhead{padding:0 var(--gutter) 8px}
.zkm-allclose{display:block;margin-inline-start:auto;min-height:44px;padding:0 4px;border:0;background:none;color:var(--tint);font:inherit;font-weight:600;cursor:pointer}
.zkm-allhead h1{margin:0;font-size:var(--t-large);font-weight:700;letter-spacing:-.02em}
.zkm-allhead p{margin:2px 0 0;color:var(--label-3);font-size:var(--t-subhead)}
.zkm-group{padding:18px var(--gutter) 0}
.zkm-group h2{margin:0 0 10px;font-size:var(--t-title3);font-weight:700}
.zkm-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px 8px;margin:0;padding:18px 8px;list-style:none;border-radius:var(--r-l);background:var(--bg-elev)}
.zkm-grid .zkm-card{width:auto}
.zkm-grid .zkm-stage{width:100%;max-width:104px;height:auto;aspect-ratio:1}
.zkm-ghelp{margin:-4px 0 10px;color:var(--label-3);font-size:var(--t-footnote)}
.zkm-adddays{margin-top:12px}
.zkm-days .zkm-dayrow{gap:10px}
.zkm-dayin{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.zkm-dayin input{min-height:38px;padding:4px 10px;border:0;border-radius:var(--r-s,10px);background:var(--bg-sunk);color:var(--label);font:inherit}

/* ---- Milestone moment (full screen) ---- */
html.zkm-on,html.zkm-on body{overflow:hidden}
@media (prefers-reduced-motion:reduce){.zkm-allpage{animation:none}}
.zkm-sheet{position:fixed;inset:0;z-index:1001;display:grid;place-items:center;padding:calc(env(safe-area-inset-top) + 24px) 24px calc(env(safe-area-inset-bottom) + 24px);
  background:radial-gradient(90% 55% at 50% 30%,color-mix(in srgb,var(--m3,#24345E) 45%,#000) 0%,#000 75%);color:#fff;animation:zkm-in .35s var(--smooth)}
.zkm-sheet[hidden]{display:none}
.zkm-sheet-in{position:relative;display:grid;justify-items:center;gap:6px;width:100%;max-width:380px;text-align:center}
.zkm-stage-l{position:relative;display:grid;place-items:center;width:min(66vw,270px);aspect-ratio:1}
.zkm-stage-l .zkm-disc{width:78%}
.zkm-sheet.celebrate .zkm-stage-l{animation:zkm-rise 1.1s var(--smooth) both}
@keyframes zkm-rise{0%{opacity:0;transform:translateY(24px) scale(.82)}60%{opacity:1}100%{transform:none}}
.zkm-sheet.is-calm .zkm-stage-l,.zkm-sheet.is-calm{animation:zkm-in .4s linear both}
.zkm-sheet,.zkm-btn,.zkm-allpage{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.zkm-sheet .zkm-ed{color:rgba(255,255,255,.6);font-size:var(--t-subhead);margin:0}
.zkm-also{margin:6px 0 0;color:rgba(255,255,255,.7);font-size:var(--t-footnote)}
.zkm-bloom{position:absolute;top:0;left:50%;width:min(110vw,520px);aspect-ratio:1;transform:translate(-50%,-22%);border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,color-mix(in srgb,var(--m1,#fff) 50%,transparent) 0%,transparent 62%);opacity:.0}
.zkm-sheet.is-done .zkm-bloom{opacity:.55}
.zkm-sheet.celebrate .zkm-bloom{animation:zkm-bloom 1.4s var(--smooth) both}
.zkm-over{margin:10px 0 0;font-size:var(--t-caption);font-weight:600;letter-spacing:.08em;text-transform:uppercase;opacity:.7}
.zkm-sheet h2{margin:0;font-size:var(--t-title1);font-weight:700;letter-spacing:-.01em}
.zkm-note{margin:0;color:rgba(255,255,255,.72)}
.zkm-date{margin:2px 0 0;color:rgba(255,255,255,.5);font-size:var(--t-subhead);font-variant-numeric:tabular-nums}
.zkm-dua{margin:10px 0 4px;font-family:var(--serif);font-size:var(--t-headline);opacity:.92}
.zkm-progress{display:grid;gap:6px;width:70%;margin:10px 0 0;font-variant-numeric:tabular-nums;font-size:var(--t-footnote);opacity:.85}
.zkm-thanks{min-width:220px;min-height:52px;margin-top:14px;border-radius:999px;font-size:var(--t-headline)}
.zkm-thanks{background:rgba(255,255,255,.16);color:#fff;border:0}
.zkm-sheet.celebrate .zkm-thanks{background:#fff;color:#000}
@keyframes zkm-in{from{opacity:0}to{opacity:1}}
@keyframes zkm-bloom{0%{opacity:0;transform:translate(-50%,-22%) scale(.6)}50%{opacity:.85}100%{opacity:.55;transform:translate(-50%,-22%) scale(1)}}

/* ---- Accessibility ---- */
@media (prefers-reduced-motion:reduce){
  .zk-rise>*,.zkm-sheet.celebrate .zkm-bloom{animation:none}
  .zkm-sheet,.zkm-sheet.celebrate .zkm-stage-l{animation:zkm-in .4s linear both}
  .zk-v2 .nav-in,.zk-v2 .nav-in>.tab,.zkm-btn,.zk-v2 #main :is(button.card,.resume-main,.today-date,.adh-now-main){transition:none}
  .zk-v2.zk-nav-compact .nav-in{transform:none}
  .zk-v2.zk-nav-compact .nav-in>.tab:not(.fab)>span{opacity:1}
}
@media (prefers-reduced-transparency:reduce){.zk-v2 .nav-in::before{-webkit-backdrop-filter:none;backdrop-filter:none;background:var(--bg-elev)}}
@media (prefers-contrast:more){.zk-v2 .nav-in::before{box-shadow:0 0 0 1px var(--separator-strong)}}