/* Zephdeck web demo: the Radial Menu (demo/radial.js). Sizes are the app's Medium wheel in points:
   a 300 pt disc, 52 pt chips on a 112 pt ring, a 76 pt center; the wheel's color is the accent. */

.radial {
  position: absolute; z-index: 30;
  display: grid; place-items: center;
  outline: none; touch-action: none;
  -webkit-tap-highlight-color: transparent;
  --rd-color: var(--accent);
  transition: opacity 0.1s;
}
:root[data-mode="light"] .radial { --rd-chip: rgba(0, 0, 0, 0.08); --rd-badge-mark: #fff; }
:root[data-mode="dark"] .radial { --rd-chip: rgba(255, 255, 255, 0.1); --rd-badge-mark: #2a2a2a; }
/* Closing fades the whole wheel out in 0.1 s. */
.radial.leaving { opacity: 0; pointer-events: none; }
.rd-wheel { position: relative; flex: none; width: 300px; height: 300px; transform: scale(var(--k, 1)); }

/* The disc: Liquid Glass, like the panel (Frosted when the demo's panel is set to Frosted). */
.rd-disc {
  position: absolute; inset: 0; border-radius: 50%;
  background: var(--glass-bg);
  backdrop-filter: blur(16px) saturate(200%) brightness(var(--glass-bright));
  -webkit-backdrop-filter: blur(16px) saturate(200%) brightness(var(--glass-bright));
  box-shadow: inset 0 1px 1px var(--glass-rim-top), inset 0 -1px 1px var(--glass-rim-bottom), 0 20px 50px rgba(0, 0, 0, 0.22), 0 2px 8px rgba(0, 0, 0, 0.08);
  opacity: 0; transform: scale(0.82);
}
.rd-disc::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(140deg, var(--glass-edge) 0%, transparent 30%, transparent 65%, var(--glass-edge-2) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.radial[data-style="frosted"] .rd-disc {
  background: var(--panel-bg);
  backdrop-filter: blur(30px) saturate(180%); -webkit-backdrop-filter: blur(30px) saturate(180%);
  box-shadow: 0 0 0 0.5px var(--panel-border), 0 8px 36px rgba(0, 0, 0, 0.25);
}
.radial[data-style="frosted"] .rd-disc::before { display: none; }
/* The disc grows 82% → 100% and fades in. */
.radial.up .rd-disc { opacity: 1; transform: none; transition: transform 0.26s cubic-bezier(0.2, 0.9, 0.3, 1.15), opacity 0.16s ease-out; }

/* The highlight: a wedge under the lit slice, the wheel's color from 4% at the center to 42% at the rim. */
.rd-wedge {
  position: absolute; inset: 0; width: 300px; height: 300px; pointer-events: none;
  opacity: 0; transition: transform 0.22s cubic-bezier(0.25, 0.9, 0.3, 1.1), opacity 0.12s ease-out;
}
.rd-wedge.on { opacity: 1; }
.rd-stop-in { stop-color: var(--rd-color); stop-opacity: 0.04; }
.rd-stop-out { stop-color: var(--rd-color); stop-opacity: 0.42; }

/* The chips: icons only. They fly out of the center one after another (the whole sweep 0.17 s). */
.rd-chip {
  position: absolute; left: 124px; top: 124px; width: 52px; height: 52px; border-radius: 50%;
  display: grid; place-items: center; color: var(--text);
  background: var(--rd-chip);
  opacity: 0; transform: translate(0, 0) scale(0.4);
  transition:
    transform 0.3s cubic-bezier(0.2, 0.9, 0.3, 1.2) var(--d, 0s),
    opacity 0.14s ease-out var(--d, 0s),
    background 0.12s, box-shadow 0.12s, color 0.12s;
}
.radial.out .rd-chip { opacity: 1; transform: translate(var(--x), var(--y)); }
/* The lit chip fills with the wheel's color, grows 1.12× and gets a soft colored shadow. */
.radial.out .rd-chip.lit {
  transform: translate(var(--x), var(--y)) scale(1.12);
  background: var(--rd-color); color: #fff;
  box-shadow: 0 3px 14px color-mix(in srgb, var(--rd-color) 45%, transparent);
}
.radial.settled .rd-chip { transition-delay: 0s; }
.rd-sym { width: 20px; height: 20px; }
.rd-sym .ic, .rd-img { width: 100%; height: 100%; display: block; }
.rd-img { width: 36px; height: 36px; filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, 0.25)); }
/* A folder chip's badge. */
.rd-badge { position: absolute; right: -1px; bottom: -1px; width: 17px; height: 17px; color: var(--text-2); }
.rd-badge .ic { width: 100%; height: 100%; display: block; }
.rd-chip.lit .rd-badge { color: #fff; --rd-badge-mark: var(--rd-color); }
/* While a number key is down, each slice shows its key. */
.rd-num { position: absolute; top: -16px; left: 50%; transform: translateX(-50%); font: 600 10px var(--font-mono); color: var(--text-2); opacity: 0; transition: opacity 0.1s; }
.radial.nums .rd-num { opacity: 1; }

/* The center: the lit slice's name over its kind; Back in a folder; otherwise the wheel's name. */
.rd-hub {
  position: absolute; left: 112px; top: 112px; width: 76px; height: 76px; padding: 0 3px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  text-align: center; color: var(--text); pointer-events: none;
  opacity: 0; transition: opacity 0.12s ease-out;
}
.radial.up .rd-hub { opacity: 1; }
.rd-hub b { font-size: 12px; font-weight: 600; line-height: 1.15; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
/* The kind line may reach past the 76 pt center into the free ring around it (the app shrinks it to fit). */
.rd-hub small { flex: none; font-size: 9.5px; line-height: 1.2; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 96px; }
.rd-back { width: 13px; height: 13px; }
.rd-back .ic { width: 100%; height: 100%; display: block; }

/* What a slice did, on the desktop above the Dock. */
.rd-toast {
  position: absolute; left: 50%; bottom: 128px; z-index: 31;
  max-width: calc(100% - 32px); padding: 8px 14px; border-radius: 999px;
  transform: translate(-50%, 8px); opacity: 0; pointer-events: none;
  background: var(--hint-bg); color: var(--text); font-size: 13px; font-weight: 500; text-align: center;
  backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%);
  box-shadow: 0 0 0 0.5px var(--panel-border), 0 6px 20px rgba(0, 0, 0, 0.15);
  transition: opacity 0.18s, transform 0.18s;
}
.rd-toast.show { opacity: 1; transform: translate(-50%, 0); }
/* Capture: a quick flash, like a screenshot. */
.rd-flash { position: absolute; inset: 0; z-index: 40; background: #fff; pointer-events: none; animation: rd-flash 0.45s ease-out forwards; }
@keyframes rd-flash { from { opacity: 0.8; } to { opacity: 0; } }

/* The hint under the demo's main hint: R for the wheel, and the island. */
.extra-hint {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 8px;
  margin: 10px 0 0; max-width: 560px; font-size: 12px; color: var(--text-2);
  transition: opacity 0.2s;
}
.desktop:has(.panel.open) .extra-hint { opacity: 0.35; }
.extra-hint-btn {
  display: inline-flex; align-items: center; gap: 7px; height: 26px; padding: 0 11px 0 4px; border-radius: 999px;
  background: var(--hint-bg); color: var(--text); font-weight: 500;
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 0 0 0.5px var(--panel-border);
}
.extra-hint-btn:hover { background: var(--menu-bg); }
.extra-hint kbd {
  min-width: 19px; height: 19px; padding: 0 5px; border-radius: 6px;
  display: inline-grid; place-items: center;
  font: 600 11px var(--font); color: var(--text);
  background: var(--fill-strong); box-shadow: inset 0 -1px 0 var(--separator);
}
:root .hero-btn.hero-btn-quiet {
  background: var(--hint-bg); color: var(--text);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 0 0 0.5px var(--panel-border), 0 4px 16px rgba(0, 0, 0, 0.08);
}

@media (prefers-reduced-motion: reduce) {
  /* Fades only. */
  .rd-disc, .radial.up .rd-disc { transform: none; transition: opacity 0.12s ease-out; }
  .rd-chip { transform: translate(var(--x), var(--y)); transition: opacity 0.12s ease-out, background 0.12s, color 0.12s; }
  .radial.out .rd-chip.lit { transform: translate(var(--x), var(--y)); }
  .rd-wedge { transition: opacity 0.12s ease-out; }
  .rd-toast { transition: opacity 0.18s; transform: translate(-50%, 0); }
}
@media (prefers-reduced-transparency: reduce) {
  .rd-disc, .radial[data-style="frosted"] .rd-disc {
    background: var(--panel-solid); backdrop-filter: none; -webkit-backdrop-filter: none;
    box-shadow: 0 0 0 1px var(--separator), 0 12px 36px rgba(0, 0, 0, 0.25);
  }
  .rd-disc::before { display: none; }
  .rd-toast, .extra-hint-btn { backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--panel-solid); }
}
@media (prefers-contrast: more) {
  .rd-chip { box-shadow: inset 0 0 0 1px var(--text-3); }
}