/* ── MANGO COINS APP CSS ──
   Brand tokens come from mangonese.css (@layer mangonese). Mobile-first 390px. */

* { -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; background: var(--bg-primary); color: var(--text-primary); font-family: var(--font-sans, 'DM Sans', sans-serif); }
body { user-select: none; -webkit-user-select: none; }
.selectable, .selectable * { user-select: text; -webkit-user-select: text; }

#app { max-width: 560px; margin: 0 auto; padding: 12px 16px calc(84px + env(safe-area-inset-bottom)); min-height: 100vh; box-sizing: border-box; }

/* ── bottom nav: safe-area INSIDE the items, never on the container ── */
.bottom-nav { position: fixed; left: 0; right: 0; bottom: 0; display: flex; background: var(--bg-elevated); border-top: 1px solid var(--bg-surface); z-index: 40; }
.bottom-nav[hidden] { display: none; }  /* display:flex would defeat the hidden attribute */
.nav-item { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; background: none; border: none; color: var(--text-muted); font-family: inherit; font-size: 10px; padding: 10px 0 calc(10px + env(safe-area-inset-bottom)); min-height: 44px; cursor: pointer; }
.nav-item.active { color: var(--mango); }
.nav-icon { font-size: 22px; line-height: 1; }

/* ── generic view chrome ── */
.view-title { font-size: 22px; font-weight: 700; margin: 8px 0 16px; }
.view-title:focus { outline: none; }  /* programmatic a11y focus target, not tabbable */
.card { background: var(--bg-surface); border-radius: var(--radius-lg, 14px); padding: 14px 16px; margin-bottom: 10px; }
.row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.muted { color: var(--text-muted); font-size: 13px; }
.pos { color: var(--success); }
.neg { color: var(--error); }
.chip-row { display: flex; gap: 8px; margin: 12px 0; flex-wrap: wrap; }
.chip { border: 1px solid var(--bg-elevated); background: var(--bg-surface); color: var(--text-secondary); border-radius: 999px; padding: 8px 14px; font-family: inherit; font-size: 13px; min-height: 36px; cursor: pointer; }
.chip.active { background: var(--mango); color: #201500; border-color: var(--mango); font-weight: 600; }

/* four states */
.skeleton { border-radius: var(--radius-lg, 14px); background: linear-gradient(100deg, var(--bg-surface) 40%, var(--bg-elevated) 50%, var(--bg-surface) 60%); background-size: 200% 100%; animation: shimmer 1.2s infinite; height: 72px; margin-bottom: 10px; }
@keyframes shimmer { to { background-position: -200% 0; } }
.empty-state, .error-state { text-align: center; padding: 48px 24px; color: var(--text-secondary); }
.empty-state .big, .error-state .big { font-size: 40px; margin-bottom: 12px; }

/* ── PIN screen ── */
.pin-screen { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 80vh; gap: 20px; }
.pin-dots { display: flex; gap: 14px; height: 16px; }
.pin-dot { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--text-muted); box-sizing: border-box; }
.pin-dot.filled { background: var(--mango); border-color: var(--mango); }
.pin-pad { display: grid; grid-template-columns: repeat(3, 76px); gap: 12px; }
.pin-key { height: 64px; border-radius: 50%; border: none; background: var(--bg-surface); color: var(--text-primary); font-size: 24px; font-family: inherit; cursor: pointer; }
.pin-key:active { background: var(--bg-elevated); }
.pin-key.ghost { background: none; font-size: 18px; color: var(--text-muted); }
.pin-error { color: var(--error); min-height: 20px; font-size: 14px; }
.pin-prompt { text-align: center; max-width: 280px; }
.pin-links { display: flex; gap: 8px; min-height: 40px; }
.pin-links .btn { min-height: 40px; }
.shake { animation: shake .35s; }
@keyframes shake { 20%,60% { transform: translateX(-8px); } 40%,80% { transform: translateX(8px); } }

/* ── sheets (drag-to-dismiss) ── */
.sheet-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 50; display: flex; align-items: flex-end; }
.sheet { background: var(--bg-elevated); width: 100%; max-width: 560px; margin: 0 auto; border-radius: 18px 18px 0 0; padding: 8px 20px calc(20px + env(safe-area-inset-bottom)); box-sizing: border-box; transform: translateY(100%); transition: transform .22s ease; max-height: 82vh; overflow-y: auto; }
.sheet-backdrop.open .sheet { transform: translateY(0); }
.sheet-handle { width: 44px; height: 5px; border-radius: 3px; background: var(--text-muted); margin: 6px auto 14px; }

/* ── toast ── */
#toast-root { position: fixed; left: 0; right: 0; bottom: calc(96px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; align-items: center; gap: 8px; z-index: 60; pointer-events: none; }
.toast { background: var(--bg-elevated); color: var(--text-primary); border-radius: 999px; padding: 10px 18px; font-size: 14px; box-shadow: 0 4px 16px rgba(0,0,0,.4); animation: toast-in .2s ease; }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } }

/* ── settings ── */
.settings-row { display: flex; align-items: center; justify-content: space-between; padding: 14px 2px; min-height: 44px; border-bottom: 1px solid var(--bg-surface); }
.settings-row:last-child { border-bottom: none; }

/* ── charts ── */
.chart-svg { width: 100%; height: auto; display: block; }
.legend { display: flex; flex-wrap: wrap; gap: 8px 14px; margin-top: 10px; }
.legend-item { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-secondary); background: none; border: none; font-family: inherit; padding: 4px 0; cursor: pointer; }
.legend-swatch { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }

/* asset / tx rows */
.asset-main { font-weight: 600; }
.tx-glyph { width: 34px; height: 34px; border-radius: 50%; background: var(--bg-elevated); display: flex; align-items: center; justify-content: center; font-size: 16px; flex-shrink: 0; }
.stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; margin-top: 8px; }