/* ── Mobile action sheet — ARKAN UI core ────────────────────────── Bottom-anchored quick-action menu opened from the bottom nav's center button. Full viewport overlay so it works regardless of what page it's opened from — appended straight to , not scoped to #app-main. */ .mobile-action-sheet-root { position: fixed; inset: 0; z-index: 1000; /* same tier as .modal-overlay — this IS the mobile modal */ display: flex; align-items: flex-end; justify-content: center; pointer-events: none; } .mas__backdrop { position: absolute; inset: 0; background: var(--surface-overlay); opacity: 0; transition: opacity var(--transition-md); } .mas__sheet { position: relative; width: 100%; max-width: 560px; background: var(--surface-elevated); border-radius: var(--radius-2xl) var(--radius-2xl) 0 0; box-shadow: var(--shadow-lg); padding: 8px 12px calc(env(safe-area-inset-bottom, 0px) + 12px); transform: translateY(100%); transition: transform var(--transition-md); } .mobile-action-sheet-root.mas--open { pointer-events: auto; } .mobile-action-sheet-root.mas--open .mas__backdrop { opacity: 1; } .mobile-action-sheet-root.mas--open .mas__sheet { transform: translateY(0); } .mas__handle { box-sizing: content-box; width: 36px; height: 4px; /* Padding enlarges the tap target to 44px without growing the visible bar — same technique as mobile-bottom-sheet.css's .mbs__handle. */ padding: 20px 40px; margin: 0 auto; background: var(--border-default); background-clip: content-box; border-radius: var(--radius-full); cursor: pointer; } .mas__list { display: flex; flex-direction: column; gap: 2px; } .mas__item { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 56px; padding: 10px 12px; background: none; border: none; border-radius: var(--radius-lg); text-align: left; cursor: pointer; color: var(--text-primary); -webkit-tap-highlight-color: transparent; } .mas__item:active { background: var(--accent-surface); } .mas__item-icon { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 40px; height: 40px; border-radius: var(--radius-lg); background: var(--accent-surface); color: var(--accent-primary); } .mas__item-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; } .mas__item-label { font-size: var(--text-base); font-weight: var(--font-medium); color: var(--text-primary); } .mas__item-hint { font-size: 12px; color: var(--text-muted); } .mas__cancel { width: 100%; min-height: 48px; margin-top: 10px; background: var(--bg-subtle); border: none; border-radius: var(--radius-lg); color: var(--text-secondary); font-family: var(--font-sans); font-size: var(--text-base); font-weight: var(--font-medium); cursor: pointer; } .mas__cancel:active { background: var(--border-subtle); } @media (prefers-reduced-motion: reduce) { .mas__backdrop, .mas__sheet { transition: none; } .mas__sheet { transform: none; } }