/* ============================================================
   aldeapath-polish.css — interaction & consistency pass
   Loaded LAST. Additive corrections only:
   · dot indicators, header touch targets, spacing scale,
     quick-action colours, nav contrast, skeletons, empty states.
   ============================================================ */

/* ── ONE SPACING + MOTION SYSTEM ───────────────────────────── */
:root {
  --ap-space-section: 24px;
  --ap-space-card: 16px;
  --ap-space-inner: 12px;
  --ap-gutter: var(--page-padding, 16px);

  --ap-dur-btn: 150ms;
  --ap-dur-card: 250ms;
  --ap-dur-modal: 300ms;
  --ap-dur-sheet: 350ms;
  --ap-ease: cubic-bezier(.32, .72, 0, 1);

  --ap-green: #16a34a;
  --ap-blue: #2563eb;
  --ap-orange: #ea580c;
  --ap-red: #dc2626;
  --ap-gray: #64748b;
}

/* Horizontal gutter floor — nothing touches the screen edge. */
.slide { padding-left: var(--ap-gutter); padding-right: var(--ap-gutter); }
.ann-viewport, .ann-dots { padding-left: 0; padding-right: 0; }

/* ── 1. CAROUSEL INDICATORS — small circular pagination dots ─ */
.ann-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 16px;
  margin-top: 12px;
  margin-bottom: 18px;       /* breathing room before quick actions */
  padding: 0;
  line-height: 0;
}

.ann-dots .ann-dot {
  width: 8px !important;
  height: 8px !important;
  min-width: 8px !important;
  min-height: 8px !important;
  max-width: 8px !important;
  max-height: 8px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  flex: 0 0 auto;
  border-radius: 50% !important;
  background: color-mix(in oklab, var(--ap-gray) 55%, transparent);
  opacity: .35;
  transform: none;
  box-shadow: none;
  transition: background-color 240ms var(--ap-ease, cubic-bezier(.4, 0, .2, 1)),
              opacity 240ms var(--ap-ease, cubic-bezier(.4, 0, .2, 1)),
              transform 240ms var(--ap-ease, cubic-bezier(.4, 0, .2, 1));
}

.ann-dots .ann-dot.ann-dot-active {
  background: var(--brand, var(--ap-blue));
  opacity: 1;
  transform: scale(1.25);
}

/* Side decorations on the cards read as artifacts — fold them
   into the card shadow instead. */
.ann-slide { box-shadow: 0 6px 18px -8px rgba(15, 23, 42, .35); }
.ann-slide::before,
.ann-slide::after { display: none !important; }
.ann-slide-watermark svg { opacity: .10; }

/* ── 2. ACTIVITY / SLIDES — never leave a blank pane ───────── */
/* A slide that is display:none removes itself from the flex track
   and shifts every later slide, so translateX lands on empty space
   (the "frozen" Activity page). Slides stay in flow; hidden ones
   are collapsed visually, not removed. */
.slides-track > .slide { display: block !important; }
.slides-track[data-active="10"] { transform: translateX(-1000%); }
.slides-track[data-active="11"] { transform: translateX(-1100%); }

/* ── 3. HEADER — breathing room + 48px touch targets ───────── */
.app-header { padding-left: var(--ap-gutter); padding-right: var(--ap-gutter); }

.app-header .icon-btn,
.app-header button:not(.nav-tab),
.header-actions > * {
  min-width: 44px;
  min-height: 44px;
}

.header-actions,
.app-header .header-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* ── 4. BALANCE CARD — eye toggle pinned top-right ─────────── */
.balance-card, .hero-card { position: relative; }

.balance-card .balance-toggle,
.hero-card .balance-toggle,
#balance-eye {
  position: absolute;
  top: var(--ap-space-inner);
  right: var(--ap-space-inner);
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  transition: background var(--ap-dur-btn) ease;
}

/* ── 5. PROFILE — name/email rhythm ────────────────────────── */
.profile-name, .settings-name { margin-bottom: 6px; }
.profile-email, .settings-email { line-height: 1.4; }

/* ── 6. VERIFICATION BADGE — outline, not a heavy pill ─────── */
.verified-badge, .kyc-badge-verified, .badge-verified {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 8px;
  background: transparent;
  border: 1px solid color-mix(in oklab, var(--ap-green) 55%, transparent);
  color: var(--ap-green);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.5;
}

/* ── 7. QUICK ACTIONS — colour-coded, recognisable ─────────── */
.quick-action .qa-icon,
.quick-actions button .qa-icon { transition: transform var(--ap-dur-btn) ease; }
.quick-action:active .qa-icon { transform: scale(.94); }

[data-action="deposit"]  .qa-icon,
.qa-deposit  .qa-icon { background: color-mix(in oklab, var(--ap-green) 14%, transparent);  color: var(--ap-green); }
[data-action="withdraw"] .qa-icon,
.qa-withdraw .qa-icon { background: color-mix(in oklab, var(--ap-orange) 14%, transparent); color: var(--ap-orange); }
[data-action="trade"]    .qa-icon,
.qa-trade    .qa-icon { background: color-mix(in oklab, var(--ap-blue) 14%, transparent);   color: var(--ap-blue); }
[data-action="history"]  .qa-icon,
.qa-history  .qa-icon { background: color-mix(in oklab, var(--ap-gray) 16%, transparent);   color: var(--ap-gray); }

/* ── 8. BOTTOM NAV — clear active vs inactive ──────────────── */
.bottom-nav .nav-tab {
  min-height: 48px;
  color: color-mix(in oklab, var(--muted, #64748b) 90%, transparent);
  opacity: .85;
  transition: color var(--ap-dur-btn) ease, opacity var(--ap-dur-btn) ease;
}

.bottom-nav .nav-tab.active {
  color: var(--brand, var(--ap-blue));
  opacity: 1;
  font-weight: 800;
}

.bottom-nav .nav-tab.active .nav-tab-icon { stroke-width: 2.4; transform: translateY(-1px); }
.bottom-nav .nav-tab .nav-tab-label { font-size: 12px; letter-spacing: .01em; }

/* ── 9. ONE ANIMATION SYSTEM ───────────────────────────────── */
button, .btn, .nav-tab, .txn-filter-btn { transition: all var(--ap-dur-btn) ease; }
.card, .ann-slide, .txn-row { transition: transform var(--ap-dur-card) var(--ap-ease), box-shadow var(--ap-dur-card) var(--ap-ease); }
.modal, .modal-content { transition: opacity var(--ap-dur-modal) var(--ap-ease), transform var(--ap-dur-modal) var(--ap-ease); }
.sheet, .bottom-sheet, .sheet-panel { transition: transform var(--ap-dur-sheet) var(--ap-ease); }

/* ── 10. SKELETON LOADING ──────────────────────────────────── */
.ap-skeleton {
  border-radius: 10px;
  background: linear-gradient(90deg,
    color-mix(in oklab, var(--muted, #64748b) 12%, transparent) 25%,
    color-mix(in oklab, var(--muted, #64748b) 20%, transparent) 37%,
    color-mix(in oklab, var(--muted, #64748b) 12%, transparent) 63%);
  background-size: 400% 100%;
  animation: apShimmer 1.3s ease-in-out infinite;
}

.ap-skeleton-row { height: 64px; margin-bottom: 10px; }
.ap-skeleton-line { height: 12px; margin-bottom: 8px; }

@keyframes apShimmer {
  0%   { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}

@media (prefers-reduced-motion: reduce) {
  .ap-skeleton { animation: none; }
}

/* ── 11. EMPTY STATES ──────────────────────────────────────── */
.ap-empty {
  text-align: center;
  padding: 40px var(--ap-space-card);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.ap-empty-art {
  width: 72px;
  height: 72px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  margin-bottom: 6px;
  background: color-mix(in oklab, var(--brand, #2563eb) 10%, transparent);
  color: var(--brand, #2563eb);
  font-size: 26px;
}

.ap-empty-title { font-size: 15px; font-weight: 800; color: var(--text, #0f172a); }
.ap-empty-text  { font-size: 13px; color: var(--muted, #64748b); line-height: 1.55; max-width: 34ch; }

.ap-empty-cta {
  margin-top: 12px;
  padding: 10px 18px;
  border: none;
  border-radius: 10px;
  background: var(--brand, #2563eb);
  color: #fff;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  transition: opacity var(--ap-dur-btn) ease, transform var(--ap-dur-btn) ease;
}

.ap-empty-cta:active { transform: scale(.97); }