/* Phone layout: one column, a tab bar at the bottom, blocks as tall as their content. Loaded last so that it wins. */
.tabbar { display: none; }
@media (max-width: 800px) {
  .shell { grid-template-columns: minmax(0, 1fr); padding: var(--sp-3); padding-bottom: calc(64px + var(--sp-3)); }
  .main { grid-column: 1; }
  .nav { display: none; }
  .tabbar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 12; background: var(--surface); border-top: 1px solid var(--line); padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); }
  .tab { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; min-height: 48px; padding: 4px 2px; border: 0; background: transparent; color: var(--muted);
    text-decoration: none; font-size: 11px; border-radius: var(--radius-control); }
  .tab span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .tab[aria-current="page"] { color: var(--text); box-shadow: inset 0 2px 0 var(--accent); }
  .topsearch { min-width: 0; flex: 0 0 36px; width: 36px; padding: 0; justify-content: center; }
  .topsearch-text, .topsearch kbd { display: none; }
  .page-title { font-size: var(--fs-md); }
  .canvas { grid-template-columns: 1fr; grid-auto-rows: auto; min-height: 0; }
  .canvas-bar { display: none; }
  .block { grid-column: 1; grid-row: auto; min-height: 0; }
  .block-body { min-height: 80px; max-height: 70vh; }
}