/* ==================== 3D SERVICE DIAL ==================== */
.d3{ position:relative; width:100%; max-width:520px; margin:0 auto; aspect-ratio:1/1;
  perspective:1100px; perspective-origin:50% 50%; touch-action:pan-y; user-select:none; -webkit-user-select:none; }
.d3.drag{ cursor:grabbing; }
.d3__halo{ position:absolute; inset:8% 6% 2%; border-radius:50%;
  background:radial-gradient(closest-side, rgba(var(--accent-lt-rgb),.38), rgba(var(--accent-lt-rgb),0) 72%);
  filter:blur(6px); animation:d3breathe 6s ease-in-out infinite; }
@keyframes d3breathe{ 50%{ transform:scale(1.06); opacity:.75 } }
.d3__rig{ --tilt:10deg; --yaw:0deg; --spin:0deg; position:absolute; left:6%; right:6%; top:50%; aspect-ratio:1;
  transform-style:preserve-3d; transform:translateY(-50%) rotateX(var(--tilt)) rotateY(var(--yaw)) rotateZ(var(--spin));
  transition:transform 1.1s cubic-bezier(.2,.8,.2,1); }
.d3.drag .d3__rig, .d3.live .d3__rig{ transition:none; }
.d3 *{ transform-style:preserve-3d; }
.d3__l{ position:absolute; inset:0; border-radius:50%; }
/* the puck: stacked discs give it thickness */
.d3__edge{ background:var(--accent-dk); }
.d3__face{ transform:translateZ(14px);
  background:radial-gradient(circle at 38% 30%, #fff 0%, var(--accent-pale) 55%, var(--accent-soft) 100%);
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.8), inset 0 -10px 30px rgba(var(--accent-dk-rgb),.18); }
.d3__shadow{ transform:translateZ(-40px) scale(1.05); background:radial-gradient(closest-side, rgba(var(--deep-rgb),.35), transparent); filter:blur(14px); }
.d3__svg{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.d3__ticks{ transform:translateZ(15px); }
.d3__ticks line{ stroke:rgba(var(--ink-rgb),.28); stroke-width:.5; }
.d3__ticks line.maj{ stroke:rgba(var(--ink-rgb),.55); stroke-width:.9; }
.d3__lbls{ transform:translateZ(26px); pointer-events:none; }
.d3__lbls text{ font:800 3.9px var(--f-body, sans-serif); fill:rgba(var(--ink-rgb),.78); dominant-baseline:middle;
  paint-order:stroke; stroke:rgba(255,255,255,.92); stroke-width:1.4px; stroke-linejoin:round; }
.d3__arc{ transform:translateZ(22px); filter:drop-shadow(0 0 3px rgba(var(--accent-rgb),.6)); }
.d3__arc .track{ fill:none; stroke:rgba(var(--accent-dk-rgb),.12); stroke-width:6; }
.d3__arc .open{ fill:none; stroke:url(#d3grad); stroke-width:6; stroke-linecap:round; transition:stroke-width .6s; }
.d3__arc .comet{ fill:none; stroke:#fff; stroke-width:2.2; stroke-linecap:round; opacity:.9; stroke-dasharray:6 245.3; animation:d3comet 7s linear infinite; }
@keyframes d3comet{ to{ stroke-dashoffset:-251.3 } }
.d3[data-feat="arc"] .d3__arc .open, .d3[data-feat="risers"] .d3__arc .open{ stroke-width:8.5; }
.d3[data-feat="arc"] .d3__arc .comet{ animation-duration:2.2s; stroke-width:3; }
/* the trace round the hub: heartbeat, wave, rays or ripples */
.d3__trace{ transform:translateZ(17px); }
.d3__trace .base{ fill:none; stroke:rgba(var(--accent-rgb),.28); stroke-width:1; }
.d3__trace .run{ fill:none; stroke:var(--accent); stroke-width:1.6; stroke-linecap:round; stroke-dasharray:24 400; animation:d3run 4s linear infinite; }
@keyframes d3run{ to{ stroke-dashoffset:-424 } }
.d3__trace .ray{ stroke:var(--accent); stroke-width:1.4; stroke-linecap:round; animation:d3ray 3s ease-in-out infinite; transform-origin:50px 50px; }
@keyframes d3ray{ 50%{ opacity:.25 } }
.d3__trace .rip{ fill:none; stroke:var(--accent); stroke-width:.9; transform-origin:50px 50px; animation:d3rip 4.2s ease-out infinite; opacity:0; }
@keyframes d3rip{ 0%{ transform:scale(.55); opacity:.9 } 100%{ transform:scale(1.25); opacity:0 } }
.d3__trace.wave{ animation:d3turn 30s linear infinite; transform-origin:50% 50%; }
@keyframes d3turn{ to{ rotate:360deg } }
.d3[data-feat="trace"] .d3__trace .run{ stroke-width:2.4; animation-duration:1.6s; }
.d3[data-feat="trace"] .d3__trace .base{ stroke:rgba(var(--accent-rgb),.6); }
.d3[data-feat="trace"] .d3__trace .rip{ stroke-width:1.6; animation-duration:2.2s; }
.d3[data-feat="trace"] .d3__trace .ray{ stroke-width:2.4; animation-duration:1.2s; }
/* the now hand */
.d3__hand{ position:absolute; left:50%; top:50%; width:0; height:0; transform:translateZ(30px) rotate(var(--now,0deg)); }
.d3__hand i{ position:absolute; left:-1.2px; bottom:0; width:2.4px; height:calc(var(--r) * .78); border-radius:2px;
  background:linear-gradient(var(--warm), rgba(227,160,106,.2)); }
.d3__hand b{ position:absolute; left:-6px; top:calc(var(--r) * -.78 - 6px); width:12px; height:12px; border-radius:50%;
  background:var(--warm); box-shadow:0 0 0 4px rgba(227,160,106,.25), 0 0 16px rgba(227,160,106,.8); animation:d3pulse 2s infinite; }
@keyframes d3pulse{ 50%{ box-shadow:0 0 0 9px rgba(227,160,106,0), 0 0 16px rgba(227,160,106,.8) } }
/* the hub: a raised drum */
.d3__hub{ position:absolute; left:50%; top:50%; width:26%; height:26%; margin:-13% 0 0 -13%; border-radius:50%; transform:translateZ(15px); }
.d3__hub span{ position:absolute; inset:0; border-radius:50%; background:var(--accent-dk); }
.d3__hub .top{ background:linear-gradient(145deg, var(--accent), var(--accent-alt)); box-shadow:inset 0 2px 0 rgba(255,255,255,.35);
  display:flex; align-items:center; justify-content:center; transition:transform .8s cubic-bezier(.2,.8,.2,1); }
.d3[data-feat="hub"] .d3__hub .top{ transform:translateZ(30px) !important; box-shadow:inset 0 2px 0 rgba(255,255,255,.35), 0 0 26px rgba(var(--accent-rgb),.7); }
.d3__hub .top em{ color:#fff; width:44%; height:44%; display:block; }
.d3__hub .top em svg{ width:100%; height:100%; }
.d3--beat .d3__hub .top em{ animation:d3beat 1.6s ease-in-out infinite; }
@keyframes d3beat{ 0%,40%,100%{ scale:1 } 12%{ scale:1.18 } 24%{ scale:1.04 } 32%{ scale:1.14 } }
.d3--breathe .d3__hub .top em{ animation:d3br 5s ease-in-out infinite; }
@keyframes d3br{ 50%{ scale:1.16 } }
.d3--spin .d3__hub .top em{ animation:d3turn 14s linear infinite; }
.d3--glow .d3__hub .top em{ animation:d3glow 3.4s ease-in-out infinite; }
@keyframes d3glow{ 50%{ filter:drop-shadow(0 0 5px rgba(255,255,255,.9)) } }
/* things that stand up off the dial and face the viewer */
.d3__bb{ position:absolute; left:var(--x); top:var(--y); width:0; height:0;
  transform:translateZ(var(--z,20px)) rotateZ(calc(-1 * var(--spin))) rotateY(calc(-1 * var(--yaw))) rotateX(calc(-1 * var(--tilt))); }
.d3__bb > *{ position:absolute; transform:translate(-50%,-100%); }
/* rim dots, lying on the dial */
.d3__pin{ position:absolute; left:var(--x); top:var(--y); width:5.4%; height:5.4%; margin:-2.7% 0 0 -2.7%; border-radius:50%;
  transform:translateZ(24px); background:#fff; color:var(--accent-lt); box-shadow:0 0 0 1.5px var(--accent-soft);
  display:flex; align-items:center; justify-content:center; transition:transform .55s cubic-bezier(.3,1.6,.5,1), background .4s, color .4s; }
.d3__pin svg{ width:62%; height:62%; }
.d3[data-feat="pins"] .d3__pin{ transform:translateZ(44px) scale(1.25); background:var(--accent); color:#fff; transition-delay:var(--d); box-shadow:0 0 12px rgba(var(--accent-rgb),.7); }
/* the marker: a tile with ripples spreading from it */
.d3__ring{ position:absolute; left:var(--x); top:var(--y); width:16%; height:16%; margin:-8% 0 0 -8%; border-radius:50%;
  transform:translateZ(23px); border:2px solid var(--accent); opacity:0; animation:d3ripple 2.6s infinite; }
.d3__ring.r2{ animation-delay:1.3s; }
@keyframes d3ripple{ 0%{ transform:translateZ(23px) scale(.3); opacity:.9 } 100%{ transform:translateZ(23px) scale(1.6); opacity:0 } }
.d3[data-feat="marker"] .d3__ring{ border-width:3px; animation-duration:1.4s; }
.d3__mark > i{ width:34px; height:34px; border-radius:12px; background:#fff; color:var(--accent-dk); display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 14px rgba(var(--deep-rgb),.22); transition:transform .5s cubic-bezier(.3,1.6,.5,1); }
.d3__mark > i svg{ width:58%; height:58%; }
.d3[data-feat="marker"] .d3__mark > i{ transform:translate(-50%,-130%) scale(1.25); background:var(--accent); color:#fff; animation:d3shake 1.2s .4s 2; }
@keyframes d3shake{ 10%,30%,50%{ rotate:-12deg } 20%,40%{ rotate:12deg } 60%{ rotate:0deg } }
/* tags that rise off the arc */
.d3__slot{ position:absolute; left:var(--x); top:var(--y); width:0; height:0; animation:d3rise 5.5s var(--d) infinite cubic-bezier(.3,.6,.4,1); opacity:0; }
.d3__slot > i{ position:absolute; transform:translate(-50%,-100%); white-space:nowrap; font:800 9px/1 var(--f-body, sans-serif); font-style:normal; letter-spacing:.02em;
  padding:4px 7px; border-radius:7px; background:#fff; color:var(--accent-dk); box-shadow:0 4px 10px rgba(var(--deep-rgb),.18); border:1px solid var(--accent-soft); }
@keyframes d3rise{
  0%{ opacity:0; transform:translate3d(0,0,24px) rotateZ(calc(-1 * var(--spin))) rotateY(calc(-1 * var(--yaw))) rotateX(calc(-1 * var(--tilt))) }
  15%{ opacity:1 }
  70%{ opacity:1 }
  100%{ opacity:0; transform:translate3d(0,-70px,40px) rotateZ(calc(-1 * var(--spin))) rotateY(calc(-1 * var(--yaw))) rotateX(calc(-1 * var(--tilt))) } }
.d3[data-feat="risers"] .d3__slot{ animation-duration:2.8s; }
.d3[data-feat="risers"] .d3__slot > i{ background:var(--accent); color:#fff; border-color:var(--accent); }
/* numbered hotspots */
.d3__rig{ pointer-events:none; }
.d3__anc > i{ display:block; width:2px; height:2px; transform:translate(-50%,-100%); }
.d3__hots{ position:absolute; inset:0; z-index:6; pointer-events:none; transform-style:flat; }
.d3__hots button{ pointer-events:auto; position:absolute; left:0; top:0; margin:-22px 0 0 -22px; width:44px; height:44px;
  border:0; padding:0; background:none; cursor:pointer; -webkit-tap-highlight-color:transparent; transform-style:flat; }
.d3__hots button i{ position:absolute; left:8px; top:8px; font-style:normal; width:28px; height:28px; border-radius:50%;
  background:var(--deep); color:#fff; font:800 12px/28px var(--f-display, sans-serif); text-align:center;
  box-shadow:0 0 0 3px #fff, 0 6px 14px rgba(var(--deep-rgb),.3); transition:transform .4s cubic-bezier(.3,1.6,.5,1), background .3s; }
.d3__hots button:hover i, .d3__hots button:focus-visible i{ transform:scale(1.15); background:var(--accent); }
.d3__hots button:focus-visible{ outline:none; }
.d3__hots button:focus-visible i{ box-shadow:0 0 0 3px #fff, 0 0 0 6px var(--accent); }
.d3__hots button.on i{ background:var(--accent); transform:scale(1.2); box-shadow:0 0 0 3px #fff, 0 0 0 9px rgba(var(--accent-rgb),.25); }
/* what a number opens: the tip itself, right under the dial */
.d3pan{ margin:.6rem 0 0; background:var(--deep); color:#fff; border-radius:20px; padding:1.1rem 1.25rem 1.2rem; position:relative;
  box-shadow:0 18px 40px rgba(var(--deep-rgb),.25); animation:d3pan .5s cubic-bezier(.2,.8,.2,1) both; }
.d3pan[hidden]{ display:none; }
@keyframes d3pan{ from{ opacity:0; transform:translateY(10px) } to{ opacity:1; transform:none } }
.d3pan__k{ display:flex; align-items:center; gap:.6rem; font-size:.68rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--accent-lt); }
.d3pan__k b{ width:24px; height:24px; border-radius:50%; background:var(--accent); color:#fff; display:inline-flex; align-items:center; justify-content:center; letter-spacing:0; font-size:.72rem; }
.d3pan .d3pan__t{ font-family:var(--f-display); font-size:1.15rem; line-height:1.25; margin:.55rem 0 .35rem; color:#fff; }
.d3pan p{ font-size:.88rem; line-height:1.55; color:rgba(255,255,255,.82); margin:0 0 .5rem; }
.d3pan__say{ display:block; margin-top:.7rem; padding:.6rem .85rem; border-left:3px solid var(--accent-lt); background:rgba(255,255,255,.08); border-radius:0 10px 10px 0; font-weight:700; font-size:.88rem; color:#fff; }
.d3pan__nav{ display:flex; gap:.5rem; margin-top:.9rem; }
.d3pan__nav button{ border:1.5px solid rgba(255,255,255,.3); background:none; color:#fff; border-radius:999px; padding:.4rem .9rem; font:700 .78rem var(--f-body, sans-serif); cursor:pointer; }
.d3pan__nav button:hover{ background:rgba(255,255,255,.12); }
.d3pan__x{ position:absolute; right:.7rem; top:.7rem; width:30px; height:30px; border-radius:50%; border:0; background:rgba(255,255,255,.12); color:#fff; font-size:1.1rem; line-height:30px; cursor:pointer; }
/* the speech bubble: the card's "what to say" line */
.d3__say{ display:none !important; position:absolute; left:50%; top:0; transform:translate(-50%,-10px); max-width:82%; z-index:5;
  background:var(--deep); color:#fff; border-radius:16px 16px 16px 4px; padding:.7rem 1rem; font-size:.86rem; font-weight:600; line-height:1.35;
  box-shadow:0 14px 30px rgba(var(--deep-rgb),.3); opacity:0; pointer-events:none; transition:opacity .45s, transform .6s cubic-bezier(.2,.8,.2,1); }
.d3__say small{ display:block; font-size:.66rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--accent-lt); margin-bottom:.25rem; }
.d3__say.on{ opacity:1; transform:translate(-50%,0); }
/* today, under the dial */
.d3cap{ display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; margin-top:.4rem;
  background:var(--card); border:1.5px solid var(--line); border-radius:18px; padding:.85rem 1.1rem; box-shadow:var(--shadow-sm); }
.d3cap__now{ display:flex; align-items:center; gap:.55rem; font-size:.86rem; font-weight:800; color:var(--ink); }
.d3cap__days{ display:flex; gap:.3rem; }
.d3cap__days i{ font-style:normal; width:26px; height:26px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:.68rem; font-weight:800; background:var(--accent-pale); color:var(--accent-dk); }
.d3cap__days i.today{ background:var(--accent); color:#fff; box-shadow:0 0 0 3px rgba(var(--accent-rgb),.2); }
.d3cap__lbl{ width:100%; font-size:.74rem; font-weight:700; color:var(--body); margin-top:-.2rem; }
.d3hint{ text-align:center; font-size:.72rem; font-weight:700; color:var(--body); opacity:.75; margin:.2rem 0 0; }
@media (max-width:860px){ .d3{ max-width:400px; } .d3__say{ font-size:.8rem; } }
@media (prefers-reduced-motion:reduce){
  .d3__halo, .d3__ring, .d3__hand b, .d3__arc .comet, .d3__trace *, .d3__trace.wave, .d3__hub .top em{ animation:none !important; }
  .d3__ring{ opacity:.5; }
  .d3__trace .rip{ opacity:.4; }
  .d3__slot{ animation:none; opacity:1; transform:translateZ(40px) rotateZ(calc(-1 * var(--spin))) rotateY(calc(-1 * var(--yaw))) rotateX(calc(-1 * var(--tilt))); }
  .d3__rig{ transition:none; }
}