/* Bar of the reserved area on phones, for every page with the bar (area pages, wallet_app, watchlist_app; loaded
   after their styles): the sections stay at the top, in a row of icons only with the style of the bottom bar of the
   graphic reference (.m-tabbar). The name of every item stays for screen readers. */
@media (max-width: 760px) {
  .m-header .m-nav { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 2px; order: 3; width: 100%; margin: 0; padding: 0; overflow: visible; -webkit-mask-image: none; mask-image: none; }
  .m-header .m-nav a { justify-content: center; min-width: 0; min-height: 48px; padding: 0; gap: 0; font-size: 0; border-radius: 19px; }
  .m-header .m-nav a > .m-i { width: 22px; height: 22px; }
}

/* Scrolling down, the logo and Esci go away and the row of the sections stays at the top as a floating bar
   (js/area_nav.js adds is-floating once the bar is stuck). The bar is sticky with a negative top, so that only the
   row stays in view, 8px from the top: above the frame of the row there are 67px (padding of the header 8px, border
   of the bar 1px, padding 10px, logo and Esci 44px, gap 10px, minus the 6px of the frame). The row always has the
   frame of the floating bar (padding 5px, border 1px), pulled out by its negative margin and transparent until it
   floats, so nothing moves when it appears. Not on low screens (phone sideways), as the bar of the theme. */
@media (max-width: 760px) and (min-height: 501px) {
  html { scroll-padding-top: 84px; }
  .m-header { position: sticky; top: -59px; padding-top: 8px; }
  .m-header .m-bar,
  .m-header .m-nav { transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
  .m-header .m-nav { width: calc(100% + 12px); margin: -6px; padding: 5px; border: 1px solid transparent; border-radius: 24px; }
  /* The name of the transition between pages goes from the bar to the row: with it the bar would cut the blur of
     the row to what is inside the bar */
  .m-header.is-floating { pointer-events: none; view-transition-name: none; }
  .m-header.is-floating .m-bar { background: transparent; border-color: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .m-header.is-floating .m-brand,
  .m-header.is-floating .m-header-side { visibility: hidden; }
  .m-header.is-floating .m-nav { view-transition-name: m-header; pointer-events: auto; background: color-mix(in srgb, var(--surface) 92%, transparent); border-color: var(--line); box-shadow: inset 0 1px 0 var(--highlight), var(--shadow-pop, 0 16px 40px rgba(0, 0, 0, 0.35), 0 2px 8px rgba(0, 0, 0, 0.2)); }
  @supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .m-header.is-floating .m-nav { background: color-mix(in srgb, var(--surface) 76%, transparent); backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%); }
  }
}

/* Sections the user cannot open (e.g. with Floow only): in the bar with a small lock after the name, on phones over
   the icon. They lead to the page that says how to unlock them (locked_section.php) */
.m-header .m-nav a.is-locked:not([aria-current]) { color: var(--muted); }
.m-header .m-nav a.is-locked:not([aria-current]):hover { color: var(--ink); }
.m-header .m-nav a > .m-i.m-lock { width: 12px; height: 12px; margin-left: -2px; opacity: 0.8; }
@media (max-width: 760px) {
  .m-header .m-nav a.is-locked { position: relative; }
  .m-header .m-nav a > .m-i.m-lock { position: absolute; top: 9px; left: calc(50% + 7px); width: 12px; height: 12px; margin: 0; opacity: 1; }
}