/* MyroPay personal app — polish layer (rev13). Loaded after styles.css / desktop.css; uses the app's existing tokens only. */
:root { --ease-out: cubic-bezier(.23, 1, .32, 1); --t-press: 120ms; --t-ui: 200ms; }

/* Tap quality: no double-tap delay, no grey flash (a real pressed state replaces it), chrome is not text-selectable */
button, [onclick], .qa, .qa-grid-item, .nav-link, .side-link, .setting-row, .quick-amt-chip, summary { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.bottom-nav, .side-nav, .quick-actions, .qa-grid, .qa-more > summary, .setting-row, button { -webkit-user-select: none; user-select: none; }
/* ...but anything a person copies stays selectable */
#va-account-number, .copyable, .txn-ref, .ref-text { -webkit-user-select: text; user-select: text; }
:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; }
button:focus:not(:focus-visible) { outline: none; }

/* Numbers line up */
.balance-amount, .amount-display, .txn-amt, #home-balance, .copyable { font-variant-numeric: tabular-nums; }

/* Hero quick actions: exactly the tiles that exist share the row evenly (5 now; 4 if Cards is switched off) */
.quick-actions { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px; overflow: visible; }
.qa { width: auto; min-width: 0; min-height: 44px; transition: transform var(--t-press) var(--ease-out); }
.qa:active { transform: scale(.96); }
.qa-label { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .72rem; }
html[data-device="desktop"] .quick-actions { grid-auto-columns: 76px; gap: 14px; }

/* Quick Access: four tiles, the rest behind "See more" */
.qa-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; padding: 0 16px; }
.qa-grid .qa-grid-item { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 14px 6px; min-width: 0; min-height: 84px;
  transition: transform var(--t-press) var(--ease-out), background-color var(--t-ui); }
.qa-grid .qa-grid-item:active { transform: scale(.97); }
.qa-grid .qa-grid-label { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .72rem; }
.qa-more { margin: 10px 0 14px; }
.qa-more > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; margin: 0 16px; border-radius: 999px;
  background: var(--bg-card); border: 1px solid var(--border); color: var(--text-secondary); font-size: .82rem; font-weight: 600; transition: background-color var(--t-ui); }
.qa-more > summary::-webkit-details-marker { display: none; }
.qa-more > summary:active { background: var(--bg-card-hover); }
.qa-more > summary i { font-size: .7rem; transition: transform var(--t-ui) var(--ease-out); }
.qa-more[open] > summary i { transform: rotate(180deg); }
.qa-more .qm-less { display: none; }
.qa-more[open] .qm-more { display: none; }
.qa-more[open] .qm-less { display: inline; }
.qa-more[open] > .qa-grid { margin-top: 10px; }
.qa-more > .qa-grid { animation: qaIn var(--t-ui) var(--ease-out); }
@keyframes qaIn { from { opacity: 0; transform: translateY(-4px); } }

/* Press feedback on list rows is a highlight, not a scale */
.setting-row { min-height: 52px; transition: background-color var(--t-press); }
.setting-row:active { background: var(--bg-card-hover); }

/* Small icon-only buttons still meet the 44px touch target */
button.btn-s[aria-label], button.btn-s[title] { min-width: 44px; min-height: 44px; }

/* Loading: skeletons shaped like the final rows (compositor-only shimmer) */
.skel { position: relative; overflow: hidden; background: var(--bg-card); border-radius: 10px; }
.skel::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); animation: skelMove 1.3s var(--ease-out) infinite;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--text-primary) 9%, transparent), transparent); }
@keyframes skelMove { to { transform: translateX(100%); } }
.skel-row { display: flex; align-items: center; gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--border); }
.skel-row:last-child { border-bottom: 0; }
.skel-row .c { width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0; }
.skel-row .m { flex: 1; display: flex; flex-direction: column; gap: 7px; }
.skel-row .l1 { height: 12px; width: 58%; } .skel-row .l2 { height: 10px; width: 34%; } .skel-row .r { width: 64px; height: 14px; }

/* Long lists and sheets */
.txn-item { content-visibility: auto; contain-intrinsic-size: auto 64px; }
.modal-overlay, .modal-sheet { overscroll-behavior: contain; }

/* Reduced motion: no spatial or looping motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .skel::after { display: none; }
}