/* The Momentum Dial on the web. Geometry and timing follow MomentumDialKit.swift:
   80 px hub, sectors 46–124, labels at 86, a 132 px smoked-glass disc, 148 px reach.
   Every dynamic value (wheel centre, label position, bloom point) arrives through
   CSSOM custom properties from momentum-dial.js — never a style attribute. */
.pk-dial { position: fixed; inset: 0; z-index: 500; --pk-dial-accent: #ff331a; --pk-dial-scale: 1.15; --pk-dial-ink: #f3efea; --pk-dial-ink-2: rgba(255, 255, 255, .68); --pk-dial-ink-3: rgba(255, 255, 255, .48); --pk-dial-hairline: rgba(255, 255, 255, .12); background: rgba(0, 0, 0, .14); color: var(--pk-dial-ink); font-family: var(--fs-font); touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.pk-dial[hidden] { display: none; }
.pk-dial.is-charging { background: transparent; pointer-events: none; }
body.pk-dial-open { user-select: none; -webkit-user-select: none; }
[data-momentum-dial-trigger] { touch-action: none; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; -webkit-user-drag: none; }

/* Charging bloom during the hold: a ring grows under the finger from 14 to 40 px
   while a red arc counts the hold down, so the wheel never arrives unannounced. */
.pk-dial-bloom { position: absolute; left: var(--pk-dial-bx, 50%); top: var(--pk-dial-by, 50%); width: 48px; height: 48px; margin: -24px 0 0 -24px; overflow: visible; pointer-events: none; transform: scale(.35); animation: pk-dial-bloom 150ms linear 0s forwards; }
.pk-dial-bloom[hidden] { display: none; }
.pk-dial-bloom-ring { fill: none; stroke: #fff; stroke-width: 1.5; opacity: .18; animation: pk-dial-bloom-ring 150ms linear forwards; }
.pk-dial-bloom-arc { fill: none; stroke: var(--pk-dial-accent); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 125.7; stroke-dashoffset: 125.7; transform: rotate(-90deg); animation: pk-dial-bloom-arc 150ms linear forwards; }
@keyframes pk-dial-bloom { to { transform: scale(1); } }
@keyframes pk-dial-bloom-ring { to { opacity: .58; } }
@keyframes pk-dial-bloom-arc { to { stroke-dashoffset: 0; } }

/* The wheel: a 296 px stage centred on the clamped press point. */
.pk-dial-stage { position: absolute; left: var(--pk-dial-cx, 50%); top: var(--pk-dial-cy, 50%); width: 296px; height: 296px; margin: -148px 0 0 -148px; transform: scale(var(--pk-dial-scale)); transform-origin: center; outline: none; }
.pk-dial-glass { position: absolute; inset: 16px; border-radius: 50%; background: rgba(0, 0, 0, .52); border: 1px solid var(--pk-dial-hairline); box-shadow: 0 26px 80px rgba(0, 0, 0, .6); backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%); animation: pk-dial-disc 160ms cubic-bezier(.2, .8, .2, 1) both; }
.pk-dial-wheel { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.pk-dial-highlight { fill: none; stroke: rgba(255, 255, 255, .09); stroke-width: 1; }
.pk-dial-sectors.is-away { display: none; }
.pk-dial-sector { fill: rgba(255, 255, 255, .045); stroke: var(--pk-dial-hairline); stroke-width: 1; transform-box: view-box; transform-origin: 0 0; transition: fill 160ms linear, stroke 160ms linear; animation: pk-dial-sector 160ms cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--pk-dial-i, 0) * 12ms); }
.pk-dial-sector.is-lit { fill: rgba(255, 51, 26, .22); stroke: rgba(255, 122, 100, .95); stroke-width: 1.4; }
.pk-dial-sector.is-glint { fill: rgba(255, 51, 26, .44); stroke: rgba(255, 122, 100, .95); stroke-width: 1.4; }
.pk-dial-dwell { fill: none; stroke: var(--pk-dial-accent); stroke-width: 2; stroke-linecap: square; stroke-dasharray: 264; stroke-dashoffset: 264; transform: rotate(-90deg); opacity: 0; }
.pk-dial-dwell.is-dwelling { opacity: 1; animation: pk-dial-dwell 300ms linear forwards; }
.pk-dial-tail { stroke: rgba(255, 255, 255, .3); stroke-width: 1; opacity: 0; }
.pk-dial-tail.is-shown { opacity: 1; }
.pk-dial-trail { fill: none; stroke: var(--pk-dial-accent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; opacity: .85; }
@keyframes pk-dial-disc { from { opacity: 0; transform: scale(.92); } }
@keyframes pk-dial-sector { from { opacity: 0; transform: scale(.92); } }
@keyframes pk-dial-dwell { to { stroke-dashoffset: 0; } }

/* Labels are the menu items: uppercase caption type at the ring's label radius. */
.pk-dial-ring { position: absolute; inset: 0; }
.pk-dial-ring[hidden] { display: none; }
.pk-dial-item { position: absolute; left: 50%; top: 50%; width: var(--pk-dial-w, 68px); margin: -13px 0 0 calc(var(--pk-dial-w, 68px) / -2); transform: translate(var(--pk-dial-x, 0), var(--pk-dial-y, 0)); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; color: var(--pk-dial-ink-2); font-size: 9px; font-weight: 500; letter-spacing: .7px; line-height: 1.2; text-align: center; text-transform: uppercase; text-decoration: none; overflow-wrap: anywhere; pointer-events: none; animation: pk-dial-label 140ms linear both; animation-delay: calc(var(--pk-dial-i, 0) * 12ms); }
.pk-dial-item[data-selected="true"] { color: var(--pk-dial-ink); font-weight: 700; }
.pk-dial-item:focus-visible { outline: 1px solid var(--pk-dial-accent); outline-offset: 3px; }
@keyframes pk-dial-label { from { opacity: 0; } }

/* Hub: black glass, the object on top in accent caption type, the verb beneath.
   It is a real button: a click (or Enter, or M) presses deeper into Momentum. */
.pk-dial-hub { position: absolute; left: 50%; top: 50%; width: 80px; height: 80px; margin: -40px 0 0 -40px; display: grid; align-content: center; gap: 3px; padding: 0 8px; border: 1px solid var(--pk-dial-hairline); border-radius: 50%; background: rgba(0, 0, 0, .66); color: inherit; font: inherit; text-align: center; cursor: pointer; appearance: none; -webkit-appearance: none; }
.pk-dial-hub:focus-visible { outline: 1px solid var(--pk-dial-accent); outline-offset: 3px; }
.pk-dial-hub-depth { color: var(--pk-dial-ink-3); font-size: 6.5px; letter-spacing: .9px; line-height: 1; text-transform: uppercase; }
.pk-dial-hub-depth::before { content: '⌄ '; }
.pk-dial-stage.is-depth .pk-dial-hub-depth { display: none; }
.pk-dial-stage.is-depth .pk-dial-hub-title { color: var(--pk-dial-ink); }
/* The inner Momentum ring: sectors 46–104, labels at 74, a tighter disc. */
.pk-dial-stage.is-depth .pk-dial-glass { inset: 36px; }
.pk-dial-stage.is-depth .pk-dial-highlight { display: none; }
.pk-dial-stage.is-depth .pk-dial-item { font-size: 8.5px; letter-spacing: .5px; }
.pk-dial-hub-title { color: var(--pk-dial-accent); font-size: 8px; font-weight: 600; letter-spacing: 1.1px; line-height: 1.15; text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; }
.pk-dial-hub-caption { color: var(--pk-dial-ink-3); font-size: 7.5px; letter-spacing: .8px; line-height: 1.1; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Blind flick: nothing draws until the gesture outlasts a flick; a committed flick
   leaves its trail and a receipt for 400 ms instead. */
.pk-dial-stage.is-blind .pk-dial-glass, .pk-dial-stage.is-blind .pk-dial-wheel, .pk-dial-stage.is-blind .pk-dial-ring, .pk-dial-stage.is-blind .pk-dial-hub { visibility: hidden; }
.pk-dial-stage.is-receipt .pk-dial-glass, .pk-dial-stage.is-receipt .pk-dial-sectors, .pk-dial-stage.is-receipt .pk-dial-ring, .pk-dial-stage.is-receipt .pk-dial-hub, .pk-dial-stage.is-receipt .pk-dial-highlight { visibility: hidden; }
.pk-dial-receipt { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); padding: 7px 12px; background: rgba(0, 0, 0, .85); color: var(--pk-dial-accent); font-size: 9px; font-weight: 700; letter-spacing: .9px; text-transform: uppercase; white-space: nowrap; clip-path: polygon(4px 0, calc(100% - 4px) 0, 100% 4px, 100% calc(100% - 4px), calc(100% - 4px) 100%, 4px 100%, 0 calc(100% - 4px), 0 4px); pointer-events: none; }
.pk-dial-receipt[hidden] { display: none; }

/* Tools sit under the wheel: the click voice's own switch and a plain close. */
.pk-dial-tools { position: absolute; left: 0; right: 0; bottom: clamp(18px, 6vh, 56px); display: flex; justify-content: center; gap: 10px; padding: 0 16px calc(env(safe-area-inset-bottom)); }
.pk-dial-tool { min-height: 36px; padding: 8px 14px; border: 1px solid rgba(255, 255, 255, .22); border-radius: 8px; background: rgba(12, 12, 15, .8); color: var(--pk-dial-ink-2); font: 600 12px/1 var(--fs-font); cursor: pointer; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.pk-dial-tool:hover, .pk-dial-tool:focus-visible { color: #fff; border-color: rgba(255, 122, 100, .9); outline: none; }
.pk-dial-tool[aria-pressed="false"] { text-decoration: line-through; text-decoration-color: rgba(255, 255, 255, .5); }
.pk-dial-tool[hidden] { display: none; }

@media (max-width: 600px) { .pk-dial { --pk-dial-scale: 1; } }
@media (prefers-reduced-transparency: reduce) { .pk-dial-glass { background: rgba(0, 0, 0, .96); backdrop-filter: none; -webkit-backdrop-filter: none; } }
@media (prefers-reduced-motion: reduce) {
  .pk-dial-glass, .pk-dial-sector, .pk-dial-item, .pk-dial-bloom, .pk-dial-bloom-ring, .pk-dial-bloom-arc, .pk-dial-dwell.is-dwelling { animation: none; }
  .pk-dial-bloom { transform: scale(1); }
  .pk-dial-bloom-ring { opacity: .58; }
  .pk-dial-bloom-arc { stroke-dashoffset: 0; }
  .pk-dial-dwell.is-dwelling { stroke-dashoffset: 0; }
  .pk-dial-sector { transition: none; }
}