/* Smartwatch-style rotary dial for section progress (desktop ≥1025px) */
.sp-wrap{position:fixed!important;right:22px!important;left:auto!important;top:50%!important;bottom:auto!important;transform:translateY(-50%)!important;
  width:230px!important;height:316px!important;padding:0!important;gap:0!important;display:block!important;border-radius:34px!important;overflow:hidden;
  background:linear-gradient(180deg,rgba(62,49,40,.66),rgba(24,18,14,.78))!important;
  -webkit-backdrop-filter:blur(22px) saturate(190%);backdrop-filter:blur(22px) saturate(190%);
  box-shadow:inset 0 1.5px 0 rgba(255,255,255,.4),inset 0 -1px 0 rgba(255,255,255,.1),inset 0 0 0 1px rgba(255,255,255,.15),0 22px 50px -14px rgba(21,10,2,.5),0 0 40px -10px rgba(212,129,58,.35)!important;
  perspective:700px;user-select:none}
.dl-list{position:absolute;inset:0;transform-style:preserve-3d;
  -webkit-mask:linear-gradient(transparent 0,#000 24%,#000 76%,transparent 100%);mask:linear-gradient(transparent 0,#000 24%,#000 76%,transparent 100%)}
.dl-lens{position:absolute;left:8px;right:8px;top:50%;height:54px;margin-top:-27px;border-radius:27px;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.28),rgba(255,255,255,.08) 55%,rgba(255,225,190,.16));
  -webkit-backdrop-filter:blur(6px) brightness(1.3) saturate(1.6);backdrop-filter:blur(6px) brightness(1.3) saturate(1.6);
  box-shadow:inset 0 1.5px 0 rgba(255,255,255,.7),inset 0 -1.5px 0 rgba(255,255,255,.18),inset 0 0 0 1px rgba(255,255,255,.26),0 8px 20px -6px rgba(0,0,0,.4),0 0 26px rgba(212,129,58,.3)}
.sp-wrap .sp-dot{position:absolute!important;left:0!important;right:0!important;top:50%!important;width:auto!important;height:46px!important;margin:-23px 0 0!important;
  padding:0 64px 0 20px!important;display:flex!important;align-items:center;gap:11px;border-radius:0!important;background:none!important;box-shadow:none!important;border:0!important;
  cursor:pointer;color:rgba(255,255,255,.72);
  transform:translate3d(calc(var(--a,5)*var(--a,5)*3.2px),calc(var(--o,5)*48px),0) rotateX(calc(var(--o,5)*-17deg)) scale(calc(1 - var(--a,5)*.09))!important;
  opacity:calc(1.08 - var(--a,5)*.34);transition:transform .65s cubic-bezier(.32,.72,0,1),opacity .45s ease,color .3s!important}
.sp-wrap .sp-dot:hover{color:#fff}
.sp-wrap .sp-dot.on{color:#fff}
.sp-wrap .sp-dot .sp-lbl{position:static!important;opacity:1!important;transform:none!important;background:none!important;border:0!important;box-shadow:none!important;padding:0!important;margin:0!important;
  -webkit-backdrop-filter:none!important;backdrop-filter:none!important;color:inherit!important;font:600 .98rem/1 'Sora',system-ui,sans-serif!important;letter-spacing:.1px;white-space:nowrap;pointer-events:none}
.sp-wrap .sp-dot.on .sp-lbl{font-weight:700!important;text-shadow:0 1px 8px rgba(0,0,0,.35)}
.dl-n{font:600 .66rem/1 ui-monospace,'SF Mono',Menlo,monospace;font-style:normal;letter-spacing:.06em;color:rgba(255,255,255,.45);min-width:18px;font-variant-numeric:tabular-nums}
.sp-dot.on .dl-n{color:#f2a867}
/* crown ridges: scroll with the page like a rotating knurled wheel */
.dl-ticks{position:absolute;right:0;top:0;bottom:0;width:16px;pointer-events:none;opacity:.85;
  background:repeating-linear-gradient(180deg,rgba(255,255,255,.5) 0 1.5px,transparent 1.5px 9px);background-position:0 calc(var(--prog,0)*-900px);
  -webkit-mask:linear-gradient(90deg,transparent,#000 70%),linear-gradient(transparent,#000 22%,#000 78%,transparent);-webkit-mask-composite:source-in;
  mask:linear-gradient(90deg,transparent,#000 70%),linear-gradient(transparent,#000 22%,#000 78%,transparent);mask-composite:intersect}
/* progress complication */
.dl-ring{position:absolute;right:16px;top:50%;width:38px;height:38px;margin-top:-19px;pointer-events:none}
.dl-ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.dl-ring circle{fill:none;stroke-width:3;stroke-linecap:round}
.dl-ring .tr{stroke:rgba(255,255,255,.18)}.dl-ring .fg{stroke:#f2a867;stroke-dasharray:94.25;stroke-dashoffset:94.25;filter:drop-shadow(0 0 4px rgba(242,168,103,.7))}
.dl-ring b{position:absolute;inset:0;display:grid;place-items:center;font:700 .6rem/1 'Sora',system-ui,sans-serif;color:#fff;font-variant-numeric:tabular-nums}
@media(prefers-reduced-motion:reduce){.sp-wrap .sp-dot{transition:none!important}}

/* ── Same warm palette as the tab bar ── */
.sp-wrap{background:linear-gradient(180deg,rgba(104,64,34,.78),rgba(52,30,15,.88))!important;
  box-shadow:inset 0 1.5px 0 rgba(255,226,196,.5),inset 0 -1px 0 rgba(255,214,170,.14),inset 0 0 0 1px rgba(255,214,170,.16),0 22px 50px -14px rgba(60,28,8,.55),0 0 40px -10px rgba(242,168,103,.35)!important;
  -webkit-backdrop-filter:blur(22px) saturate(160%);backdrop-filter:blur(22px) saturate(160%)}
.dl-lens{background:linear-gradient(180deg,rgba(255,196,138,.55),rgba(212,129,58,.34) 60%,rgba(184,100,38,.4))!important;
  -webkit-backdrop-filter:blur(6px) saturate(150%)!important;backdrop-filter:blur(6px) saturate(150%)!important;
  box-shadow:inset 0 1.5px 0 rgba(255,240,222,.8),inset 0 -1.5px 0 rgba(255,214,170,.25),inset 0 0 0 1px rgba(255,226,196,.4),0 8px 20px -6px rgba(60,28,8,.45),0 0 26px rgba(242,168,103,.4)!important}
.sp-wrap .sp-dot{color:rgba(255,235,212,.74)}.sp-wrap .sp-dot.on,.sp-wrap .sp-dot:hover{color:#FFF4E6}
.dl-n{color:rgba(255,226,196,.5)}.sp-dot.on .dl-n{color:#FFF4E6}
.dl-ticks{background-image:repeating-linear-gradient(180deg,rgba(255,226,196,.55) 0 1.5px,transparent 1.5px 9px)}
.dl-ring .tr{stroke:rgba(255,226,196,.22)}.dl-ring .fg{stroke:#FFE2C0}

/* ── Boxless dial: no panel, no lens box — items float on the page ── */
.sp-wrap{background:none!important;box-shadow:none!important;border-radius:0!important;
  -webkit-backdrop-filter:none!important;backdrop-filter:none!important;overflow:visible!important}
.dl-lens{left:2px;right:auto;width:4px;height:30px;margin-top:-15px;border-radius:4px;
  background:linear-gradient(180deg,#F2A867,#B8642A)!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;
  box-shadow:0 0 14px rgba(242,168,103,.85),0 0 4px rgba(212,129,58,.9)!important;border:0!important}
.sp-wrap .sp-dot{color:rgba(91,52,19,.5)}
.sp-wrap .sp-dot.on,.sp-wrap .sp-dot:hover{color:#4A2A10}
.sp-wrap .sp-dot .sp-lbl{text-shadow:0 0 12px rgba(255,248,238,.95),0 0 3px rgba(255,248,238,.9)!important}
.sp-wrap .sp-dot.on .sp-lbl{font-size:1.08rem!important;text-shadow:0 0 14px rgba(255,248,238,1),0 0 3px rgba(255,248,238,.95)!important}
.dl-n{color:rgba(184,100,38,.6)}.sp-dot.on .dl-n{color:#D4813A}
.dl-ticks{background-image:repeating-linear-gradient(180deg,rgba(184,100,38,.6) 0 1.5px,transparent 1.5px 9px)}
.dl-ring .tr{stroke:rgba(184,100,38,.2)}.dl-ring .fg{stroke:#D4813A;filter:drop-shadow(0 0 4px rgba(242,168,103,.6))}
.dl-ring b{color:#4A2A10;text-shadow:0 0 6px rgba(255,248,238,.9)}
.sp-wrap{padding-right:0}

/* ── Light ink when the dial sits over a dark section ── */
.sp-wrap.dl-on-dark .sp-dot{color:rgba(255,236,214,.55)}
.sp-wrap.dl-on-dark .sp-dot.on,.sp-wrap.dl-on-dark .sp-dot:hover{color:#FFF4E6}
.sp-wrap.dl-on-dark .sp-dot .sp-lbl,.sp-wrap.dl-on-dark .sp-dot.on .sp-lbl{text-shadow:0 1px 10px rgba(0,0,0,.55)!important}
.sp-wrap.dl-on-dark .dl-n{color:rgba(255,200,150,.65)}.sp-wrap.dl-on-dark .sp-dot.on .dl-n{color:#F2A867}
.sp-wrap.dl-on-dark .dl-ticks{background-image:repeating-linear-gradient(180deg,rgba(255,214,170,.6) 0 1.5px,transparent 1.5px 9px)}
.sp-wrap.dl-on-dark .dl-ring .tr{stroke:rgba(255,226,196,.25)}.sp-wrap.dl-on-dark .dl-ring .fg{stroke:#FFD9B0}
.sp-wrap.dl-on-dark .dl-ring b{color:#FFF4E6;text-shadow:none}
.sp-wrap .sp-dot,.sp-wrap .dl-n,.dl-ring b{transition:color .4s ease}
