/* ===== global nav: 下のタブバー、広い画面では左のレール ===== */

/* ===== global nav: bottom tab bar, or a left rail on a wide screen ===== */
#gnav{flex:none;display:flex;gap:4px;padding:6px 8px calc(6px + env(safe-area-inset-bottom));background:var(--surface);border-top:2px solid var(--line)}
#gnav button{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;padding:7px 4px;border-radius:14px;font-size:11px;font-weight:800;color:var(--ink3);background:none;line-height:1.2}
#gnav button .ic{font-size:22px;line-height:1}
#gnav button.on{color:var(--sky-deep);background:var(--surface2)}
#gnav button:hover{color:var(--sky-deep)}
body.inlesson #gnav{display:none}
@media (min-width:900px){
  .app{display:grid;grid-template-columns:100px minmax(0,1fr);grid-template-rows:minmax(0,1fr)}
  body.inlesson .app{display:flex}
  .screen{grid-column:2;grid-row:1}
  #gnav{grid-column:1;grid-row:1;flex-direction:column;justify-content:flex-start;gap:8px;padding:18px 8px;border-top:0;border-right:2px solid var(--line)}
  #gnav button{flex:none;font-size:12px;padding:10px 2px}
  #gnav button .ic{font-size:24px}
}

/* ===== phone: everything one size smaller ===== */
@media (max-width:560px){
  #gnav button{font-size:10.5px;padding:6px 2px}
  #gnav button .ic{font-size:20px}
}