/* Only inside the phone app (html.is-native). On the website none of this applies. */
.apptabs{position:fixed;left:0;right:0;bottom:0;z-index:50;background:var(--ink);border-top:1px solid var(--line);padding:6px 0 max(6px,env(safe-area-inset-bottom))}
.apptabs div{max-width:560px;margin:0 auto;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:2px;padding:0 6px}
.apptabs a{display:grid;justify-items:center;gap:2px;padding:7px 4px;border-radius:12px;color:var(--muted);font:700 11px var(--body);text-decoration:none}
.apptabs a[aria-current="page"]{color:var(--fg);background:var(--card-on)}
.apptabs a:focus-visible{outline:2px solid var(--signal);outline-offset:-2px}
.apptabs svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.apptabs.kb{display:none}
body.has-apptabs{padding-bottom:calc(76px + env(safe-area-inset-bottom))}
html.is-native body{-webkit-tap-highlight-color:transparent;overscroll-behavior-y:none}
/* The app skips the website's heavy decoration (moving background, glass blur, grain, sparks): it is what made pages slow to
   draw and slow to answer a tap on a phone. Colours and layout are unchanged. */
html.is-native .fx-aurora,html.is-native #fx-field,html.is-native #liquid,html.is-native .grain,html.is-native .rave,html.is-native .sparks,html.is-native .cursor-light,html.is-native .progress{display:none!important}
html.is-native *,html.is-native *::before,html.is-native *::after{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
html.is-native a,html.is-native button,html.is-native input,html.is-native select,html.is-native label,html.is-native summary{touch-action:manipulation}
/* the opening: only opacity and size change, so it stays smooth */
html.is-native .intro-logo{filter:none}
html.is-native .intro-center{transition:opacity .5s ease,transform .7s cubic-bezier(.4,0,.2,1)}
html.is-native .intro.go .intro-center{filter:none;transform:scale(1.3)}
html.is-native .intro.go .spill{animation:none}
html.is-native .intro .veil{transition:opacity .6s ease}
html.is-native .intro.go .veil{transform:none;opacity:0}
/* the website's own buttons, intro lines and footer are not needed once the tabs are there */
html.is-native .topbar nav a.btn,html.is-native .orgbar,html.is-native .playhead .lede,html.is-native .playhead .eyebrow,html.is-native .minifoot{display:none}
html.is-native #app>nav.tabs{display:none}
/* the website's Menu button (it only held the buttons hidden above) and the app's own 3 second splash, which "Tap to enter" replaces */
html.is-native .menu-btn,html.is-native .menu-panel,html.is-native .splash{display:none!important}
/* Passes and Account get the same solid top bar as Events and Organiser, so all four tabs look alike */
html.is-native #app.shell{padding-top:0}
html.is-native #app .head{position:sticky;top:0;z-index:5;margin:0 -20px;padding:max(16px,env(safe-area-inset-top)) 20px 8px;background:color-mix(in srgb,var(--ink) 88%,transparent);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
/* events: search and filters */
.evtools{display:grid;gap:10px;margin:0 0 16px}
.evtools .chips{display:flex;gap:8px;flex-wrap:wrap}
.evtools .chip{border:1px solid var(--line);background:transparent;color:var(--muted);border-radius:99px;padding:8px 14px;font:700 13px var(--body)}
.evtools .chip[aria-pressed="true"]{color:var(--fg);background:var(--card-on);border-color:var(--signal)}
.evcount{margin:0 0 10px;font-size:13px}
.sharebtn{margin-top:10px}