/* The Workbox wheel demo's styles, taken from the Workbox landing
   (~/Presenting/site/style.css). The rule set was chosen by matching selectors
   against the classes the stage actually renders with the wheel open, plus the
   states the demo toggles, so nothing it needs is left behind. */

.stage {
  /* the wedge labels use the system face in the app and on the landing */
  --font-system: -apple-system, "SF Pro Display", "SF Pro Text", system-ui, sans-serif;
}

/* ---------- demo stage ---------- */
.stage-wrap {
  margin-bottom: 40px;
}
.stage {
  position: relative;
  aspect-ratio: 1560 / 1014;
  border-radius: 14px;
  overflow: hidden;
  background: #f4f0e7 url("/assets/desktop-bg.png") center / cover no-repeat;
  box-shadow: var(--shadow-card);
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
}
.stage.tool-cursor:not(.open) {
  cursor: none;
}
.stage.tool-pen:not(.open),
.stage.tool-text:not(.open),
.stage.tool-white:not(.open),
.stage.tool-steps:not(.open) {
  cursor: crosshair;
}
.prompt {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 3;
  transform: translate(-50%, -50%);
  appearance: none;
  border: 0;
  background: var(--control-bg);
  color: var(--ink);
  font: 500 13px/1 var(--font-sans);
  letter-spacing: var(--tracking);
  padding: 11px 17px;
  border-radius: 999px;
  box-shadow: var(--shadow-control);
  cursor: pointer;
  transition:
    opacity 0.24s var(--ease-out),
    box-shadow 0.16s ease,
    transform 0.12s ease;
}
@media (hover: hover) and (pointer: fine) {
  .prompt:hover {
      box-shadow: var(--shadow-control-hover);
    }
}
.prompt:active {
  transform: translate(-50%, -50%) scale(0.97);
}
/* ambient invite ring: transform/opacity only, pauses when hidden */
.prompt::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1.5px solid rgba(28, 26, 23, 0.2);
  opacity: 0;
  pointer-events: none;
  animation: prompt-pulse 2.8s var(--ease-out) infinite;
}
.stage.open .prompt,
.stage.has-tool .prompt {
  opacity: 0;
  pointer-events: none;
}
.stage.open .prompt::after,
.stage.has-tool .prompt::after {
  animation-play-state: paused;
}
.fx-board {
  position: absolute;
  inset: 0;
  background: rgba(253, 253, 251, 0.96);
}
/* Board tool: a floating kanban window over the desktop (DOM order keeps it
   above the fx layers but below the scrim, so the wheel dims it) */
.board-panel {
  position: absolute;
  left: 50%;
  top: 47%;
  transform: translate(-50%, -50%);
  width: 74%;
  max-width: 300px;
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
  box-shadow:
    0 0 0 1px rgba(45, 36, 20, 0.08),
    0 18px 40px rgba(30, 24, 12, 0.28);
  animation: board-pop 0.26s var(--ease-bloom) both;
}
.bp-bar {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 7px 10px;
  background: rgba(55, 45, 25, 0.05);
  border-bottom: 1px solid var(--hairline);
}
.bp-dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: rgba(45, 36, 20, 0.18);
}
.bp-title {
  margin-left: 6px;
  font: 600 9px/1 var(--font-sans);
  letter-spacing: 0.02em;
  color: var(--ink-2);
}
.bp-cols {
  display: flex;
  gap: 6px;
  padding: 8px;
}
.bp-col {
  flex: 1;
  min-width: 0;
  background: rgba(55, 45, 25, 0.04);
  border-radius: 7px;
  padding: 6px;
}
.bp-col b {
  display: block;
  font: 600 7.5px/1 var(--font-sans);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-3);
  margin-bottom: 5px;
}
.bp-col i {
  display: block;
  font: 500 8px/1.25 var(--font-sans);
  font-style: normal;
  color: var(--ink-2);
  background: #fff;
  border: 1px solid var(--hairline);
  border-radius: 4px;
  padding: 4px 5px;
  margin-top: 4px;
}
.bp-col i.hot {
  border-color: rgba(45, 36, 20, 0.28);
  color: var(--ink);
  box-shadow: 0 1px 2px rgba(45, 36, 20, 0.06);
}
.ink {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.fx-spotlight {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.fx-dot {
  position: absolute;
  left: 0;
  top: 0;
  width: 10px;
  height: 10px;
  margin: -5px;
  border-radius: 999px;
  background: radial-gradient(circle, #ff5147 0 40%, #e0241a 100%);
  box-shadow:
    0 0 6px 2px rgba(255, 69, 58, 0.65),
    0 0 18px 6px rgba(255, 69, 58, 0.3);
  pointer-events: none;
  will-change: transform;
}
.fx-cross {
  position: absolute;
  left: 0;
  top: 0;
  width: 24px;
  height: 24px;
  margin: -12px;
  pointer-events: none;
  will-change: transform;
}
.fx-cross::before,
.fx-cross::after {
  content: "";
  position: absolute;
  background: rgba(20, 20, 26, 0.9);
  box-shadow: 0 0 0 0.8px rgba(255, 255, 255, 0.6);
}
.fx-cross::before {
  left: 0;
  right: 0;
  top: 50%;
  height: 1.5px;
  margin-top: -0.75px;
}
.fx-cross::after {
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1.5px;
  margin-left: -0.75px;
}
.fx-badges {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.step-badge {
  position: absolute;
  width: 18px;
  height: 18px;
  margin: -9px;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  font: 600 10px/18px var(--font-sans);
  text-align: center;
  box-shadow:
    0 0 0 2px #fff,
    0 4px 10px rgba(45, 36, 20, 0.3);
  animation: badge-pop 0.22s var(--ease-bloom) both;
}
.fx-halo {
  position: absolute;
  left: 0;
  top: 0;
  width: 34px;
  height: 34px;
  margin: -17px;
  border-radius: 999px;
  border: 2.5px solid rgba(28, 26, 23, 0.85);
  box-shadow:
    0 0 0 5px rgba(28, 26, 23, 0.12),
    0 0 14px rgba(28, 26, 23, 0.25);
  pointer-events: none;
  will-change: transform;
}
.scrim {
  position: absolute;
  inset: 0;
  opacity: 0;
  background: radial-gradient(
    circle at 50% 50%,
    rgba(6, 7, 11, 0.64) 0%,
    rgba(10, 11, 16, 0.52) 58%,
    rgba(14, 15, 22, 0.52) 100%
  );
  backdrop-filter: blur(4px) saturate(1.05);
  -webkit-backdrop-filter: blur(4px) saturate(1.05);
  transition: opacity 0.3s ease;
  pointer-events: none;
}
.stage.open .scrim {
  opacity: 1;
}
/* wheel */
.wheel {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 224px;
  height: 224px;
  margin: -112px 0 0 -112px;
  opacity: 0;
  transform: scale(calc(0.42 * var(--wheel-scale, 1)));
  transition:
    transform 0.32s var(--ease-bloom),
    opacity 0.24s ease;
  pointer-events: none;
  will-change: transform, opacity;
}
.stage.open .wheel {
  opacity: 1;
  transform: scale(var(--wheel-scale, 1));
}
.wheel-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
/* The wheel is light glass, matching the current app build: a frosted white
   sheet, ink-dark icons and labels, and the aimed wedge solid blue (#3990ED,
   sampled from the recording).

   One departure from the app: there the glass sits on a dark colourful
   wallpaper and 58% white is plenty. This stage's desktop is near-white
   (luminance 246), where that same wash is invisible. So the sheet runs
   denser and the edges are a dark hairline rather than a white one, which
   is how frosted panels read on light surfaces. */
.wheel-svg {
  filter: drop-shadow(0 6px 14px rgba(18, 24, 38, 0.16));
}
.wheel-svg .ring {
  fill: none;
  stroke: rgba(22, 28, 40, 0.1);
  stroke-width: 1;
}
.wedge {
  transform-box: fill-box;
  transform-origin: center;
  transition: transform 0.13s var(--ease-focus);
}
/* Two stacked sheets: a cool grey base for substance, a white sheen on top.
   The base is tinted rather than white on purpose. In the app the glass sits
   on a colourful wallpaper and reads as light grey-blue; piling up white here
   would just match this near-white desktop and vanish. */
.wedge .shape-bg {
  fill: rgba(198, 208, 224, 0.8);
}
.wedge .shape {
  fill: rgba(255, 255, 255, 0.22);
  stroke: rgba(22, 28, 40, 0.12);
  stroke-width: 1;
}
.wedge .glyph {
  stroke: rgba(24, 28, 38, 0.84);
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke 0.13s ease;
}
.wedge text {
  fill: rgba(24, 28, 38, 0.78);
  font: 600 7px var(--font-sans);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  text-anchor: middle;
  transition: fill 0.13s ease;
}
.wedge.focused {
  transform: scale(1.08);
}
/* the aimed wedge goes solid blue, and its ink flips to white */
.wedge.focused .shape,
.wedge.is-active .shape {
  fill: #3990ed;
  stroke: rgba(255, 255, 255, 0.62);
  stroke-width: 1.5;
}
.wedge.focused .glyph,
.wedge.is-active .glyph {
  stroke: #fff;
}
.wedge.focused text,
.wedge.is-active text {
  fill: #fff;
}
/* hub: dark disc + analog stick (Wheel/HubView.swift) */
.hub {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 103px;
  height: 103px;
  margin: -51.5px 0 0 -51.5px;
  border-radius: 999px;
  /* the same frosted sheet as the wedges, a shade denser so the centre still
     reads as a separate piece rather than more wheel */
  background: radial-gradient(
    circle at 50% 34%,
    rgba(255, 255, 255, 0.74) 0%,
    rgba(255, 255, 255, 0.56) 100%
  );
  border: 1px solid rgba(22, 28, 40, 0.12);
  box-shadow: 0 8px 18px rgba(12, 16, 26, 0.18);
  display: grid;
  place-items: center;
}
.hub::before {
  /* specular sheen, top-left */
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: radial-gradient(
    circle at 30% 6%,
    rgba(255, 255, 255, 0.55) 0%,
    transparent 55%
  );
  pointer-events: none;
}
.stick-base {
  grid-area: 1 / 1;
  width: 33px;
  height: 33px;
  border-radius: 999px;
  background: radial-gradient(circle at 50% 38%, rgba(236, 240, 246, 0.9) 0%, rgba(214, 221, 232, 0.85) 70%, rgba(198, 206, 220, 0.9) 100%);
  border: 1px solid rgba(22, 28, 40, 0.1);
  box-shadow:
    inset 0 0 10px rgba(30, 38, 52, 0.16),
    0 2px 4px rgba(12, 16, 26, 0.22);
}
.stick-cap {
  grid-area: 1 / 1;
  width: 23px;
  height: 23px;
  border-radius: 999px;
  background: radial-gradient(circle at 50% 32%, #ffffff 0%, #eef1f6 46%, #dbe0e9 100%);
  border: 1px solid rgba(22, 28, 40, 0.14);
  box-shadow:
    inset 0 2px 3px rgba(255, 255, 255, 0.95),
    0 3px 5px rgba(12, 16, 26, 0.2);
  display: grid;
  place-items: center;
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease;
  will-change: transform;
}
.stick-cap .power {
  width: 8px;
  height: 8px;
  fill: none;
  stroke: #fff;
  stroke-width: 2.4;
  stroke-linecap: round;
  opacity: 0;
  transition: opacity 0.15s ease;
}
.hub.armed .stick-cap {
  /* #EB2C38, sampled from the app's active centre */
  background: radial-gradient(circle at 50% 32%, #f2545e 0%, #eb2c38 60%, #d31d29 100%);
  border-color: rgba(255, 255, 255, 0.55);
  box-shadow:
    inset 0 2px 3px rgba(255, 255, 255, 0.35),
    0 0 10px rgba(235, 44, 56, 0.55),
    0 3px 5px rgba(12, 16, 26, 0.3);
}
.hub.armed .stick-cap .power {
  opacity: 1;
}
/* stage chrome */
.hud {
  position: absolute;
  top: 26px;
  left: 10px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  pointer-events: none;
}
.hud-chip {
  font: 500 10px/1 var(--font-mono);
  letter-spacing: var(--tracking);
  font-variant-numeric: tabular-nums;
  color: #fff;
  background: rgba(28, 28, 32, 0.62);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  padding: 5px 9px;
}
/* visible turn-off affordance (top-right): shows only while a tool is active
   and the wheel is closed, so users never hit a dead end */
.turn-off {
  position: absolute;
  top: 26px;
  right: 10px;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  appearance: none;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  background: rgba(28, 28, 32, 0.62);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: #fff;
  font: 500 10px/1 var(--font-sans);
  letter-spacing: var(--tracking);
  padding: 6px 10px 6px 8px;
  cursor: pointer;
  opacity: 0;
  transform: translateY(-4px);
  pointer-events: none;
  transition:
    opacity 0.2s var(--ease-out),
    transform 0.2s var(--ease-out),
    background-color 0.14s ease;
}
.turn-off svg {
  width: 11px;
  height: 11px;
}
.turn-off:hover {
  background: rgba(28, 28, 32, 0.82);
}
.turn-off:active {
  transform: scale(0.96);
}
.stage.has-tool .turn-off {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.stage.open .turn-off {
  opacity: 0;
  transform: translateY(-4px);
  pointer-events: none;
}
.chip-timer {
  min-width: 5.4ch;
  text-align: center;
}
.toast {
  position: absolute;
  left: 50%;
  bottom: 44px;
  transform: translate(-50%, 4px);
  white-space: nowrap;
  font: 600 11px/1 var(--font-system);
  color: #fff;
  background: rgba(28, 28, 32, 0.78);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  padding: 7px 12px;
  opacity: 0;
  transition:
    opacity 0.2s ease,
    transform 0.2s var(--ease-out);
  pointer-events: none;
}
.toast.show {
  opacity: 1;
  transform: translate(-50%, 0);
}
.roadmap-phase.open .mk-closed {
  opacity: 0;
  transform: scale(0.6) rotate(90deg);
}
.roadmap-phase.open .mk-open {
  opacity: 1;
  transform: scale(1) rotate(0);
}
.roadmap-phase.open .phase-chevron {
  transform: rotate(180deg);
  color: var(--ink-2);
}
.roadmap-phase.open .phase-body {
  grid-template-rows: 1fr;
}
@keyframes prompt-pulse {
  0% {
    opacity: 0.55;
    transform: scale(1);
  }
  70%,
  100% {
    opacity: 0;
    transform: scale(1.16);
  }
}
@keyframes board-pop {
  from {
    opacity: 0;
    transform: translate(-50%, -46%) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}
@keyframes badge-pop {
  from {
    transform: scale(0.4);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}