/* Shared design-system primitives for all Sonear apps.
   App-specific styles (`:root` variables, accents, layout) stay in each page.
   Link this BEFORE the page's inline <style> so per-app rules can override. */

*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}

/* Slide view-transition system (used with the shared router) */
.view{transition:transform .25s ease,opacity .25s ease}
.view.animating{position:fixed;top:0;left:0;width:100%;height:100%;overflow-y:auto;z-index:50;background:var(--bg)}
.view.slide-out-left{transform:translateX(-100%);opacity:0;pointer-events:none}
.view.slide-out-right{transform:translateX(100%);opacity:0;pointer-events:none}
.view.slide-in-left{transform:translateX(-100%);opacity:0}
.view.slide-in-right{transform:translateX(100%);opacity:0}

/* Header nav buttons */
.back-btn{color:var(--dim);font-size:24px;font-weight:600;text-decoration:none;width:36px;height:36px;display:flex;align-items:center;justify-content:center;border-radius:10px;border:1px solid var(--border);background:var(--card);flex-shrink:0}
.back-btn:active{opacity:.7}
.home-btn{color:var(--dim);text-decoration:none;width:36px;height:36px;display:flex;align-items:center;justify-content:center;border-radius:10px;border:1px solid var(--border);background:var(--card);flex-shrink:0}
.home-btn:active{opacity:.7}
@media(display-mode:standalone){.home-btn{display:none}}

/* Entrance animation */
@keyframes fade-up{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}