/* ============================================================
   vr14: THE WEEK PATH as a sculpted ceramic track. Week Path only.
   The tube is drawn by wpxDraw in real pixels; the nodes are
   ceramic spheres set into it. #8792A2 marks what is done and
   today, nothing else carries colour.
   ============================================================ */

body.pm-premium .wpx{position:relative;height:110px;margin:6px 0 0;--wxs:1}
body.pm-premium #progress #whubWeek .wpx{height:118px;margin:0}
body.pm-premium .wpx.big{height:178px!important}
body.pm-premium .wpx-svg{position:absolute;left:0;top:0;overflow:visible;pointer-events:none;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%)}/* the tube: a cast shadow, a darker edge, the white body, the shade along its underside, the crown light */

body.pm-premium .wpx-svg path{fill:none;stroke-linecap:round;stroke-linejoin:round}
body.pm-premium .wpx-svg .wx-sh{stroke:rgba(28,29,30,.20)}
body.pm-premium .wpx-svg .wx-track .wx-edge{stroke:#CFD1D4}
body.pm-premium .wpx-svg .wx-track .wx-body{stroke:#F5F5F6}
body.pm-premium .wpx-svg .wx-track .wx-under{stroke:rgba(28,29,30,.10)}
body.pm-premium .wpx-svg .wx-track .wx-hi{stroke:#FFFFFF}/* the finished stretch: the same tube in the accent's material */

body.pm-premium .wpx-svg .wx-done .wx-edge{stroke:#8792A2}
body.pm-premium .wpx-svg .wx-done .wx-body{stroke:#8792A2}
body.pm-premium .wpx-svg .wx-done .wx-under{stroke:rgba(28,29,30,.20)}
body.pm-premium .wpx-svg .wx-done .wx-hi{stroke:rgba(255,255,255,.55)}
body.pm-premium .wpx-svg.wx-anim .wx-done path{stroke-dasharray:1 1;animation:wxDraw .95s cubic-bezier(.25,.8,.25,1) .1s both}
@keyframes wxDraw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}/* the checkpoints */


body.pm-premium .wpx-days{position:absolute;inset:0}
body.pm-premium .wpx-days i{position:absolute;width:0;height:0;font-style:normal;cursor:pointer;-webkit-tap-highlight-color:transparent;outline:none;
  --s:28px;--lab:24px;animation:wxRise .55s cubic-bezier(.2,.8,.2,1) var(--d,0ms) both}
body.pm-premium .wpx-days i b{position:absolute;left:calc(var(--s) * var(--wxs) / -2);top:calc(var(--s) * var(--wxs) / -2);width:calc(var(--s) * var(--wxs));height:calc(var(--s) * var(--wxs));
  border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at 34% 28%,#FFFFFF 0%,#FBFBFB 20%,#EDEEEF 56%,#D6D7D9 86%,#CCCBC8 100%);
  box-shadow:0 0 0 calc(3px * var(--wxs)) #F0F1F2,0 0 0 calc(3.6px * var(--wxs)) rgba(164,163,160,.5),
    0 calc(5px * var(--wxs)) calc(8px * var(--wxs)) calc(-1px * var(--wxs)) rgba(28,29,30,.28),
    inset 0 calc(-2px * var(--wxs)) calc(3px * var(--wxs)) rgba(28,29,30,.14),inset 0 1px 1px #FFFFFF;
  transition:transform .28s cubic-bezier(.2,.8,.2,1),box-shadow .28s}
body.pm-premium .wpx-days i b svg{width:56%;height:56%}
body.pm-premium .wpx-days i span{position:absolute;left:0;top:calc(var(--lab) * var(--wxs));transform:translateX(-50%);white-space:nowrap;
  font-size:var(--ui-meta,14px);font-weight:700;letter-spacing:.01em;color:var(--ink-3);line-height:1;transition:color .2s}/* done: a tinted node with the check pressed into it */

body.pm-premium .wpx-days i.on{--s:30px;--lab:25px}
body.pm-premium .wpx-days i.on b{background:radial-gradient(circle at 32% 26%,rgba(255,255,255,.6) 0%,rgba(255,255,255,.16) 24%,rgba(255,255,255,0) 44%),
    radial-gradient(circle at 62% 80%,rgba(28,29,30,.12) 0%,rgba(28,29,30,0) 55%),#8792A2;
  box-shadow:0 0 0 calc(3px * var(--wxs)) #F0F1F2,0 0 0 calc(3.6px * var(--wxs)) rgba(135,146,162,.75),
    0 calc(5px * var(--wxs)) calc(8px * var(--wxs)) calc(-1px * var(--wxs)) rgba(28,29,30,.28),
    inset 0 calc(-2px * var(--wxs)) calc(3px * var(--wxs)) rgba(28,29,30,.12),inset 0 1px 1px rgba(255,255,255,.6)}
body.pm-premium .wpx-days i.on b svg{fill:none;stroke:#FFFFFF;stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 -.6px 0 rgba(28,29,30,.35)) drop-shadow(0 .8px 0 rgba(255,255,255,.3))}
body.pm-premium .wpx-days i.on span{color:var(--ink-2)}/* ahead but not trained: a missed day sits lower and flatter */

body.pm-premium .wpx-days i.missed b{background:radial-gradient(circle at 40% 34%,#F8F8F9 0%,#E8E9EA 60%,#D9DADC 100%);
  box-shadow:0 0 0 calc(3px * var(--wxs)) #F0F1F2,0 0 0 calc(3.6px * var(--wxs)) rgba(164,163,160,.45),0 1px 2px rgba(28,29,30,.14),inset 0 0 0 calc(2px * var(--wxs)) rgba(154,153,150,.3),inset 0 2px 3px rgba(28,29,30,.14)}/* rest: a small ivory dish, sunk into the track, a moon in it */

body.pm-premium .wpx-days i.rest{--s:22px;--lab:20px}
body.pm-premium .wpx-days i.rest b{background:radial-gradient(circle at 50% 38%,#ECE9E2 0%,#F4F2EC 52%,#FBFAF6 100%);
  box-shadow:0 0 0 calc(2.6px * var(--wxs)) #F3F2EE,0 0 0 calc(3.2px * var(--wxs)) rgba(178,172,158,.5),0 1px 2px rgba(84,78,64,.14),
    inset 0 calc(2px * var(--wxs)) calc(3px * var(--wxs)) rgba(118,110,94,.30),inset 0 -1px 1px #FFFFFF}
body.pm-premium .wpx-days i.rest b svg{width:50%;height:50%;fill:#B6AFA2;stroke:none;filter:drop-shadow(0 .6px 0 #FFFFFF)}
body.pm-premium .wpx-days i.rest span{color:var(--ink-4,#9AA3AF)}/* today: the raised checkpoint, a ceramic collar around a deeper node */

body.pm-premium .wpx-days i.today{--s:42px;--lab:33px;z-index:2;animation-name:wxRiseT}
body.pm-premium .wpx-days i.today b{transform:translateY(calc(-3px * var(--wxs)));
  background:radial-gradient(circle at 34% 25%,rgba(255,255,255,.9) 0%,rgba(255,255,255,.3) 16%,rgba(255,255,255,0) 40%),
    radial-gradient(circle at 64% 82%,rgba(28,29,30,.14) 0%,rgba(28,29,30,0) 55%),#8792A2;
  box-shadow:0 0 0 calc(4.5px * var(--wxs)) #F6F6F7,0 0 0 calc(5.2px * var(--wxs)) rgba(135,146,162,.7),
    0 calc(13px * var(--wxs)) calc(15px * var(--wxs)) calc(-5px * var(--wxs)) rgba(28,29,30,.40),0 2px 3px rgba(28,29,30,.16),
    inset 0 calc(-3px * var(--wxs)) calc(5px * var(--wxs)) rgba(28,29,30,.14),inset 0 2px 2px rgba(255,255,255,.75)}
body.pm-premium .wpx-days i.today b::after{content:"";position:absolute;left:19%;top:11%;width:36%;height:24%;border-radius:50%;background:radial-gradient(closest-side,rgba(255,255,255,.95),rgba(255,255,255,0));pointer-events:none}
body.pm-premium .wpx-days i.today.rest{--s:30px;--lab:26px}
body.pm-premium .wpx-days i.today.rest b{background:radial-gradient(circle at 50% 38%,#E9E6DE 0%,#F3F1EB 50%,#FCFBF8 100%);
  box-shadow:0 0 0 calc(4px * var(--wxs)) #F5F4F0,0 0 0 calc(4.7px * var(--wxs)) rgba(135,146,162,.7),0 calc(9px * var(--wxs)) calc(12px * var(--wxs)) calc(-5px * var(--wxs)) rgba(28,29,30,.30),inset 0 calc(2px * var(--wxs)) calc(4px * var(--wxs)) rgba(118,110,94,.30)}
body.pm-premium .wpx-days i.today.rest b::after{content:none}
body.pm-premium .wpx-days i.today span{font-size:var(--ui-meta,14px);font-weight:800;color:var(--ink)}/* touch: the node presses in; the chosen day lifts with a fine ring */

body.pm-premium .wpx-days i:active b{transform:translateY(1px) scale(.93);transition-duration:.08s}
body.pm-premium .wpx-days i.sel b{transform:translateY(calc(-4px * var(--wxs)));outline:2px solid rgba(135,146,162,.65);outline-offset:calc(6px * var(--wxs))}
body.pm-premium .wpx-days i.today.sel b{transform:translateY(calc(-6px * var(--wxs)));outline-offset:calc(8px * var(--wxs))}
body.pm-premium .wpx-days i.sel span{color:var(--ink)}
body.pm-premium .wpx-days i:focus-visible b{outline:2px solid var(--ink);outline-offset:calc(6px * var(--wxs))}
@keyframes wxRise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes wxRiseT{0%{opacity:0;transform:translateY(9px) scale(.9)}60%{opacity:1}100%{opacity:1;transform:none}}/* wider canvases: bigger labels */

body.pm-premium .wpx.mid .wpx-days i span{font-size:var(--ui-meta,14px)}
body.pm-premium .wpx.tight .wpx-days i span{font-size:var(--ui-meta,14px)}
body.pm-premium .wpx.tight .wpx-days i.today span{font-size:var(--ui-meta,14px)}
body.pm-premium .wpx.big .wpx-days i span{font-size:var(--ui-meta,14px)}
body.pm-premium .wpx.big .wpx-days i.today span{font-size:15px}
@media (prefers-reduced-motion:reduce){
  body.pm-premium .wpx-days i,body.pm-premium .wpx-svg.wx-anim .wx-done path{animation:none!important}
  body.pm-premium .wpx-days i b{transition:none}
}/* the tapped day, under the path */

body.pm-premium .wpx-detail{display:grid;grid-template-columns:1fr auto;align-items:center;gap:2px 12px;margin:12px 0 0;padding:12px 14px;border-radius:16px;
  background:rgba(255,255,255,.78);border:1px solid rgba(34,35,36,.06);box-shadow:0 1px 0 #FFFFFF inset,0 8px 18px -12px rgba(28,29,30,.4);animation:wxDet .28s cubic-bezier(.2,.8,.2,1) both}
body.pm-premium .wpx-detail[hidden]{display:none!important}
body.pm-premium .wpx-detail b{grid-column:1;font-size:var(--ui-meta,14px);font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
body.pm-premium .wpx-detail strong{grid-column:1;font-size:16px;font-weight:800;letter-spacing:-.01em;color:var(--ink)}
body.pm-premium .wpx-detail span{grid-column:1;font-size:var(--ui-meta,14px);color:var(--ink-2);line-height:1.3}
body.pm-premium .wpx-detail .wpx-chg{grid-column:2;grid-row:1/4;border:0;background:#FFFFFF;border-radius:999px;padding:10px 14px;font:inherit;font-size:var(--ui-meta,14px);font-weight:700;color:var(--ink);
  box-shadow:0 1px 0 #FFFFFF inset,0 0 0 1px rgba(28,29,30,.07),0 4px 10px -6px rgba(28,29,30,.45);cursor:pointer;white-space:nowrap}
@keyframes wxDet{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
body.pm-premium #progress #whubWeek .wk-pathkey{cursor:default}