@layer components {
/* ── the swipe pie (hold a cycle button, slide) ─────────────────── */
/* Floats near the top, out from under the thumb: the button's options
   as pizza slices around a hub (release there: the default action),
   the dot mirroring the finger, and the aimed option's title in one
   line beneath. */
#swipe {
  --pg: var(--accent);   /* the page's hue (swipe.js and tip.js set it per page) */
  position: fixed; z-index: 20;
  left: 50%; top: calc(env(safe-area-inset-top) + 5rem);
  transform: translateX(-50%);
  background: var(--bg); border: 1px solid var(--line); border-radius: calc(.7rem * var(--round));
  box-shadow: var(--float); padding: .55rem;
  opacity: 0; pointer-events: none; transition: opacity .15s;

  &.on { opacity: 1; }
  &.charging { transition: none; }   /* the hold drives opacity frame by frame */
  /* a pick fades all but the chosen cell — the grin outlasts the cat */
  &.picked :is(g, #swipehub, #swipedot):not(.picked) { opacity: 0; }
}
/* the breath before a page flip: both pies pulse, then settle on the new
   hue (the .1s fill transition carries the colour over) */
#swipe.flipsoon #swipemap, #swipemini.flipsoon { animation: flippulse .45s ease-in-out infinite; }
@keyframes flippulse { 50% { filter: brightness(1.45); } }
#swipemap {
  position: relative; width: 8.5rem; height: 8.5rem;

  svg { display: block; width: 100%; height: 100%; }
  path, circle {
    fill: var(--chip); stroke: var(--bg); stroke-width: 1.5;
    transition: fill .1s;
  }
  text {
    font: .9rem var(--mono); fill: var(--ink);
    text-anchor: middle; dominant-baseline: central;
    transition: fill .1s;   /* the label bleeds with its cell, not after it */
  }
  g {
    transition: opacity .25s;

    &.hot, &.picked {
      path, circle { fill: var(--pg); }
      text { fill: var(--bg); }
    }
    text.key { font-size: .45rem; fill: var(--dim); }
    &.hot text.key, &.picked text.key { fill: var(--bg); opacity: .75; }
  }
}
/* the countdown rides a band just outside the whole pie — its own
   element, clear of the hub (which goes solid accent at home) and of the
   finger dot's travel */
#swipering {
  position: absolute; left: 50%; top: 50%;
  width: 8.7rem; height: 8.7rem; margin: -4.35rem;
  border-radius: 50%; pointer-events: none;
  -webkit-mask: radial-gradient(closest-side, transparent calc(100% - 5px), #000 calc(100% - 4px));
  mask: radial-gradient(closest-side, transparent calc(100% - 5px), #000 calc(100% - 4px));
}
#swipehub {
  position: absolute; left: 50%; top: 50%;
  width: 2.4rem; height: 2.4rem; margin: -1.2rem;
  display: grid; place-items: center; border-radius: 50%;
  font: .95rem var(--mono); color: var(--ink);
  background: var(--bg); border: 1px solid var(--line);
  transition: background-color .1s, color .1s, opacity .25s;

  &.hot, &.picked {
    background-color: var(--pg); border-color: var(--pg); color: var(--bg);
  }
}
#swipedot {
  position: absolute; left: 50%; top: 50%;
  width: .55rem; height: .55rem; margin: -.275rem;
  border-radius: 50%; background: var(--pg);
  box-shadow: 0 0 0 2px var(--bg);
  transition: opacity .25s;

  &.out { background: var(--warn); }
}
/* the mini pie, laid on the held button behind its glyph: a conic wedge
   lights the aimed option (or a radial dot the middle), in the page's
   hue; .ring is the countdown annulus, shown only while home. Clipped to
   the button's own shape (border-radius: inherit). */
#swipemini {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  border-radius: inherit; overflow: hidden;
  transition: filter .15s;

  .ring {
    position: absolute; inset: 0; border-radius: inherit;
    -webkit-mask: radial-gradient(closest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
    mask: radial-gradient(closest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
  }
}
/* the title wears the map's width, never the other way around — a
   longer title must not re-center the card and shove the pie sideways */
#swipetitle {
  width: 8.5rem; margin-top: .4rem; text-align: center;
  font-size: .8rem; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
} /* @layer components */