/* Gesture guide cards — GESTURE_UI_GUIDE Part B, with PL tokens.
   Greyscale wireframes, one purple accent, a shared 3 s loop. */
.g-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.g-card { background: var(--bg2); border: 1px solid var(--border); border-radius: 16px; padding: 12px 8px 10px; text-align: center; }
.g-title { font-size: 14px; font-weight: 700; margin-bottom: 8px; }
.g-where { font-size: 11px; color: var(--text2); margin-top: 8px; }
.g-phone {
  --d: 3s; --wire: var(--bg-border); --wire2: var(--bg-border-hover); --screen: var(--bg-wash);
  --media: light-dark(var(--aussie-30), var(--aussie-60)); --touch: rgba(15,15,21,.35);
  position: relative; width: 112px; height: 232px; margin: 0 auto; border-radius: 22px; border: 1.5px solid var(--wire2); background: var(--screen); overflow: hidden;
}
.g-phone::before { content: ''; position: absolute; top: 6px; left: 50%; margin-left: -16px; width: 32px; height: 8px; border-radius: 4px; background: var(--wire2); z-index: 20; }
.g-phone::after { content: ''; position: absolute; bottom: 5px; left: 50%; margin-left: -18px; width: 36px; height: 3px; border-radius: 2px; background: var(--wire2); z-index: 20; }
.g-screen { position: absolute; inset: 0; padding: 22px 8px 12px; animation: g-loop var(--d) infinite; }
@keyframes g-loop { 0% { opacity: 0; } 6%, 92% { opacity: 1; } 100% { opacity: 0; } }
.g-list { display: flex; flex-direction: column; gap: 6px; }
.g-row { position: relative; height: 26px; border-radius: 6px; background: var(--bg2); border: 1px solid var(--wire); overflow: hidden; }
.g-row::before { content: ''; position: absolute; left: 6px; top: 9px; width: 8px; height: 8px; border-radius: 50%; background: var(--wire2); }
.g-row::after { content: ''; position: absolute; left: 20px; top: 11px; width: 50px; height: 4px; border-radius: 2px; background: var(--wire); }
.g-touch { position: absolute; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; background: var(--touch); box-shadow: 0 0 0 1.5px rgba(255,255,255,.9); opacity: 0; z-index: 30; pointer-events: none; }

/* Tap */
.g-tap .t1 { left: 56px; top: 100px; animation: g-press var(--d) infinite; }
.g-tap .g-r2 { animation: g-flash var(--d) infinite; }
@keyframes g-press { 0%, 18% { opacity: 0; transform: scale(1.5); } 26% { opacity: 1; transform: scale(1); } 32% { transform: scale(.75); } 40% { opacity: 1; transform: scale(1); } 50%, 100% { opacity: 0; transform: scale(1); } }
@keyframes g-flash { 0%, 30% { background: var(--bg2); } 34%, 60% { background: var(--primary-bg); border-color: var(--primary); } 75%, 100% { background: var(--bg2); } }

/* Double tap */
.g-media { position: relative; height: 120px; border-radius: 8px; background: var(--wire); margin-top: 20px; overflow: hidden; }
.g-media i { position: absolute; left: 14px; bottom: 0; border-left: 30px solid transparent; border-right: 30px solid transparent; border-bottom: 44px solid var(--media); }
.g-media b { position: absolute; right: 18px; top: 18px; width: 18px; height: 18px; border-radius: 50%; background: var(--media); }
.g-dtap .t1 { left: 56px; top: 100px; animation: g-dpress var(--d) infinite; }
.g-dtap .g-media { animation: g-zoomfit var(--d) infinite; }
@keyframes g-dpress { 0%, 18% { opacity: 0; } 22% { opacity: 1; transform: scale(1); } 26% { transform: scale(.75); } 30% { transform: scale(1); } 34% { transform: scale(.75); } 40% { opacity: 1; transform: scale(1); } 48%, 100% { opacity: 0; } }
@keyframes g-zoomfit { 0%, 36% { transform: scale(1); } 46%, 82% { transform: scale(1.5); background: var(--primary-bg); } 90%, 100% { transform: scale(1); } }

/* Touch and hold — the menu opens below the lifted item, never on top of it */
.g-dim { position: absolute; inset: 0; background: rgba(15,15,21,.25); backdrop-filter: blur(1px); opacity: 0; animation: g-dim var(--d) infinite; z-index: 2; }
.g-bubble { position: relative; z-index: 3; margin: 50px 10px 0; height: 44px; border-radius: 10px; background: var(--bg2); border: 1px solid var(--wire2); animation: g-lift var(--d) infinite; }
.g-menu { position: relative; z-index: 3; margin: 8px 10px 0 30px; background: var(--bg2); border-radius: 8px; padding: 6px; display: flex; flex-direction: column; gap: 6px; transform-origin: top right; opacity: 0; transform: scale(.6); animation: g-menu var(--d) infinite; }
.g-menu i { height: 6px; border-radius: 3px; background: var(--wire); }
.g-menu i:first-child { background: var(--primary); }
.g-hold .t1 { left: 56px; top: 94px; animation: g-holddot var(--d) infinite; }
@keyframes g-holddot { 0%, 15% { opacity: 0; transform: scale(1.5); } 22%, 50% { opacity: 1; transform: scale(.85); } 56%, 100% { opacity: 0; } }
@keyframes g-dim { 0%, 38% { opacity: 0; } 44%, 85% { opacity: 1; } 92%, 100% { opacity: 0; } }
@keyframes g-lift { 0%, 38% { transform: scale(1); box-shadow: none; } 44%, 85% { transform: scale(1.06); box-shadow: 0 8px 16px rgba(15,15,21,.2); } 92%, 100% { transform: scale(1); } }
@keyframes g-menu { 0%, 40% { opacity: 0; transform: scale(.6); } 48%, 85% { opacity: 1; transform: scale(1); } 92%, 100% { opacity: 0; transform: scale(.6); } }

/* Swipe — row reveals actions */
.g-acts { position: absolute; right: 0; top: 0; bottom: 0; display: flex; }
.g-acts i { width: 18px; background: var(--wire2); }
.g-acts i:last-child { background: var(--primary); }
.g-swipe .g-r1::before, .g-swipe .g-r1::after { animation: g-swiperow var(--d) infinite; }
.g-swipe .g-r1 { background: linear-gradient(var(--bg2), var(--bg2)) no-repeat; background-size: 100% 100%; animation: g-swipebg var(--d) infinite; }
.g-swipe .t1 { left: 80px; top: 67px; animation: g-swipedot var(--d) infinite; }
@keyframes g-swiperow { 0%, 22% { transform: translateX(0); } 48%, 78% { transform: translateX(-36px); } 88%, 100% { transform: translateX(0); } }
@keyframes g-swipebg { 0%, 22% { background-size: 100% 100%; } 48%, 78% { background-size: calc(100% - 36px) 100%; } 88%, 100% { background-size: 100% 100%; } }
@keyframes g-swipedot { 0%, 14% { opacity: 0; transform: translateX(0); } 20% { opacity: 1; transform: translateX(0); } 48% { opacity: 1; transform: translateX(-36px); } 54%, 100% { opacity: 0; transform: translateX(-36px); } }
.g-swipe .g-acts { z-index: 0; }
.g-swipe .g-r1 > * { z-index: 0; }

/* Drag — row lifts and moves two slots */
.g-hdl { position: absolute; right: 6px; top: 8px; width: 10px; height: 10px; background: repeating-linear-gradient(var(--wire2) 0 2px, transparent 2px 4px); }
.g-drag .g-r1 { z-index: 2; animation: g-dragrow var(--d) infinite; }
.g-drag .g-r2, .g-drag .g-r3 { animation: g-shift var(--d) infinite; }
.g-drag .t1 { left: 95px; top: 67px; animation: g-dragdot var(--d) infinite; }
@keyframes g-dragrow { 0%, 22% { transform: none; } 30% { transform: scale(1.05); box-shadow: 0 6px 12px rgba(15,15,21,.18); border-color: var(--primary); } 55%, 80% { transform: translateY(64px) scale(1.05); box-shadow: 0 6px 12px rgba(15,15,21,.18); border-color: var(--primary); } 88%, 100% { transform: translateY(64px); } }
@keyframes g-shift { 0%, 30% { transform: none; } 55%, 100% { transform: translateY(-32px); } }
@keyframes g-dragdot { 0%, 15% { opacity: 0; } 22%, 30% { opacity: 1; transform: none; } 55% { opacity: 1; transform: translateY(64px); } 62%, 100% { opacity: 0; transform: translateY(64px); } }

/* Pinch — two dots, image scales */
.g-pinch .g-media { animation: g-pinchimg var(--d) infinite; }
.g-pinch .t1 { left: 46px; top: 110px; animation: g-p1 var(--d) infinite; }
.g-pinch .t2 { left: 66px; top: 90px; animation: g-p2 var(--d) infinite; }
@keyframes g-pinchimg { 0%, 22% { transform: scale(1); } 55%, 85% { transform: scale(1.7); } 100% { transform: scale(1); } }
@keyframes g-p1 { 0%, 15% { opacity: 0; } 22% { opacity: 1; transform: none; } 55% { opacity: 1; transform: translate(-26px, 26px); } 62%, 100% { opacity: 0; transform: translate(-26px, 26px); } }
@keyframes g-p2 { 0%, 15% { opacity: 0; } 22% { opacity: 1; transform: none; } 55% { opacity: 1; transform: translate(26px, -26px); } 62%, 100% { opacity: 0; transform: translate(26px, -26px); } }

/* Pull to refresh */
.g-pull .g-list { animation: g-pulllist var(--d) infinite; }
.g-spin { position: absolute; left: 50%; top: 28px; margin-left: -8px; width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--wire); border-top-color: var(--primary); opacity: 0; animation: g-spinfade var(--d) infinite, g-rot .7s linear infinite; }
.g-pull .t1 { left: 56px; top: 50px; animation: g-pulldot var(--d) infinite; }
@keyframes g-pulllist { 0%, 22% { transform: none; } 50% { transform: translateY(40px); } 60%, 80% { transform: translateY(28px); } 92%, 100% { transform: none; } }
@keyframes g-spinfade { 0%, 35% { opacity: 0; } 45%, 80% { opacity: 1; } 90%, 100% { opacity: 0; } }
@keyframes g-rot { to { rotate: 360deg; } }
@keyframes g-pulldot { 0%, 15% { opacity: 0; } 22% { opacity: 1; transform: none; } 50% { opacity: 1; transform: translateY(40px); } 56%, 100% { opacity: 0; transform: translateY(40px); } }

/* Edge swipe back */
.g-under, .g-top { position: absolute; inset: 0; padding: 22px 8px; display: flex; flex-direction: column; gap: 6px; }
.g-under { animation: g-under var(--d) infinite; }
.g-top { background: var(--screen); box-shadow: -4px 0 10px rgba(15,15,21,.12); animation: g-top var(--d) infinite; }
.g-top .g-row { border-color: var(--primary-line); }
.g-edge .t1 { left: 3px; top: 120px; animation: g-edgedot var(--d) infinite; }
@keyframes g-under { 0%, 22% { transform: translateX(-30%); opacity: .5; } 55%, 85% { transform: none; opacity: 1; } 100% { transform: translateX(-30%); opacity: .5; } }
@keyframes g-top { 0%, 22% { transform: none; } 55%, 85% { transform: translateX(100%); } 100% { transform: none; } }
@keyframes g-edgedot { 0%, 15% { opacity: 0; transform: none; } 22% { opacity: 1; } 50% { opacity: 1; transform: translateX(90px); } 56%, 100% { opacity: 0; transform: translateX(90px); } }

/* Swipe to dismiss */
.g-backdrop { position: absolute; inset: 0; background: rgba(15,15,21,.3); animation: g-bd var(--d) infinite; }
.g-sheet { position: absolute; left: 0; right: 0; bottom: 0; height: 110px; background: var(--bg2); border-radius: 14px 14px 0 0; padding: 8px; display: flex; flex-direction: column; gap: 6px; animation: g-sheet var(--d) infinite; }
.g-grabber { width: 24px; height: 4px; border-radius: 2px; background: var(--primary); margin: 0 auto 4px; }
.g-dismiss .t1 { left: 56px; top: 132px; animation: g-dismdot var(--d) infinite; }
@keyframes g-bd { 0%, 22% { opacity: 1; } 55%, 80% { opacity: 0; } 92%, 100% { opacity: 1; } }
@keyframes g-sheet { 0%, 22% { transform: none; } 55%, 80% { transform: translateY(105%); } 92%, 100% { transform: none; } }
@keyframes g-dismdot { 0%, 15% { opacity: 0; transform: none; } 22% { opacity: 1; } 50% { opacity: 1; transform: translateY(80px); } 56%, 100% { opacity: 0; transform: translateY(80px); } }

@media (prefers-reduced-motion: reduce) {
  .g-phone *, .g-phone *::before, .g-phone *::after { animation-play-state: paused !important; animation-delay: calc(var(--d) * -.5) !important; }
}