/* ============================================================
   micro.css — Micro-interactions (UX Stream B)
   Subtle hover lift + active press on buttons.
   Respects prefers-reduced-motion.
   ============================================================ */

@media (prefers-reduced-motion: no-preference) {
  button:not([disabled]),
  .btn,
  .btn-primary,
  .btn-secondary,
  .btn-ghost {
    transition: transform 120ms cubic-bezier(0.23, 1, 0.32, 1),
                box-shadow 120ms cubic-bezier(0.23, 1, 0.32, 1),
                background-color 120ms ease,
                border-color 120ms ease,
                color 120ms ease;
    will-change: transform;
  }

  button:not([disabled]):hover,
  .btn:hover,
  .btn-primary:hover,
  .btn-secondary:hover,
  .btn-ghost:hover {
    transform: translateY(-1px);
  }

  button:not([disabled]):active,
  .btn:active,
  .btn-primary:active,
  .btn-secondary:active,
  .btn-ghost:active {
    transform: scale(0.97);
  }
}

/* ── Floating theme toggle button ────────────────────────────── */
.theme-toggle {
  position: fixed;
  bottom: calc(1.25rem + env(safe-area-inset-bottom, 0));
  inset-inline-start: 1rem;
  z-index: 40;
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--border, rgba(255,255,255,0.12));
  background: var(--bg-elevated, #13131E);
  color: var(--text-1, #F0F0FF);
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(0,0,0,0.35);
  padding: 0;
}
.theme-toggle:hover { border-color: var(--purple-light, #F5C040); }
.theme-toggle .theme-icon { display: none; }
[data-theme="dark"] .theme-toggle .theme-icon-sun { display: inline-block; }
[data-theme="light"] .theme-toggle .theme-icon-moon { display: inline-block; }
/* Fallback: when no data-theme attribute is set, show sun (default is dark) */
html:not([data-theme]) .theme-toggle .theme-icon-sun { display: inline-block; }

@media (max-width: 640px) {
  .theme-toggle {
    width: 38px;
    height: 38px;
    bottom: calc(0.85rem + env(safe-area-inset-bottom, 0));
    inset-inline-start: 0.75rem;
    opacity: 0.8;
  }
  .theme-toggle:hover, .theme-toggle:active { opacity: 1; }
}

/* ── Progress ring ───────────────────────────────────────────── */
.progress-ring {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.progress-ring svg { display: block; }

/* ── Virtual list ────────────────────────────────────────────── */
.virtual-list { position: relative; overflow-y: auto; }
.virtual-list-spacer { position: relative; width: 100%; }
.virtual-list-viewport { position: absolute; inset-inline: 0; top: 0; will-change: transform; }

/* ── Shortcuts help overlay ──────────────────────────────────── */
.shortcuts-help {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(4px);
  z-index: 9500;
  display: flex;
  align-items: center;
  justify-content: center;
}
.shortcuts-help[hidden] { display: none; }
.shortcuts-help-panel {
  position: relative;
  background: var(--bg-elevated, #13131E);
  color: var(--text-1, #F0F0FF);
  border: 1px solid var(--border, rgba(255,255,255,0.12));
  border-radius: 16px;
  padding: 1.75rem 2rem;
  min-width: 320px;
  max-width: 90vw;
  box-shadow: 0 16px 64px rgba(0,0,0,0.6);
  direction: rtl;
}
.shortcuts-help-panel h2 {
  margin: 0 0 1rem;
  font-size: 1.15rem;
  font-weight: 800;
}
.shortcut-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 0.5rem 0;
  border-top: 1px solid var(--border, rgba(255,255,255,0.08));
  font-size: 0.9rem;
}
.shortcut-row:first-of-type { border-top: 0; }
.shortcut-row kbd {
  display: inline-block;
  min-width: 2em;
  padding: 0.2rem 0.5rem;
  border: 1px solid var(--border, rgba(255,255,255,0.15));
  border-radius: 6px;
  background: rgba(255,255,255,0.05);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.82rem;
  text-align: center;
}
.shortcuts-help-close {
  position: absolute;
  top: 0.5rem;
  inset-inline-start: 0.75rem;
  background: transparent;
  border: 0;
  color: var(--text-2, rgba(240,240,255,0.7));
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  padding: 0.25rem 0.5rem;
}