/* Phone layout for the top nav, shared by every page.
 *
 * The nav markup is copied into each page and holds up to ten items, which
 * never fit on one 375px row; before this file the nav pushed every page
 * wider than the screen. Here .nav-right dissolves so its children can be
 * ordered directly: brand, sign-in and theme toggle share the top row and the
 * page links wrap onto the rows below. Every link stays visible.
 *
 * Each page's own nav rules live in its <style> block or films.css, so every
 * selector here starts with .nav to outrank them wherever this file loads. */
@media(max-width:600px){
  .nav.nav{padding:8px 14px;height:auto;min-height:56px;flex-wrap:wrap;justify-content:flex-start;row-gap:4px;column-gap:2px}
  .nav .nav-brand{order:0;flex:1 1 auto}
  .nav .nav-right{display:contents}
  .nav .nav-right>*{order:2}
  .nav .nav-right>#authBar,.nav .nav-right>#auth-bar,.nav .nav-right>.auth-bar,
  .nav .nav-right>#admin-user,.nav .nav-right>.theme-toggle{order:1}
  .nav .nav-right>.theme-toggle{margin-left:6px}
  /* Signed in, the auth bar shows the email address; clip long ones */
  .nav .nav-right>#authBar,.nav .nav-right>#auth-bar,.nav .nav-right>.auth-bar,
  .nav .nav-right>#admin-user{max-width:42vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .nav::after{content:"";order:1;flex-basis:100%;height:0}
  .nav .nav-link{padding:6px 5px;font-size:11.5px;white-space:nowrap}
  .nav .nav-menu>button{padding:6px 5px;font-size:11.5px;white-space:nowrap}
  /* Games sits at the left of the wrapped row, so open its menu rightwards */
  .nav .nav-drop{left:0;right:auto}
}