/* Shared look: the phone section bar, a slim sticky row with one picture per section, shown once
   the header has scrolled away (engine/theme/nav.js). */
.navbar{display:none}
@media (max-width:720px){
  .navbar{position:fixed; left:0; right:0; bottom:0; z-index:25; display:flex; justify-content:space-around; align-items:stretch; padding:4px max(10px, env(safe-area-inset-left)) calc(4px + env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-right));
    background:rgba(var(--paper-rgb),.96); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); border-top:1.5px solid var(--line); box-shadow:0 -6px 18px rgba(var(--shadow-rgb),.10); transform:translateY(110%); transition:transform .3s}
  .navbar.on{transform:none}
  .navbar[hidden]{display:none}
  .navbar a{flex:1 1 0; display:flex; flex-direction:column; align-items:center; gap:2px; padding:5px 2px 3px; font:600 9.5px/1 var(--f-caps); letter-spacing:.14em; text-transform:uppercase; color:var(--soft); text-decoration:none; border-radius:6px}
  .navbar a img{width:32px; height:32px; object-fit:contain; opacity:.82; transition:transform .25s, opacity .25s}
  .navbar a.on{color:var(--ink); background:rgba(var(--wash-rgb),.25)}
  .navbar a.on img{opacity:1; transform:translateY(-2px) scale(1.08)}
  body.has-bar footer{padding-bottom:72px}
}