html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; }
body { display: flex; flex-direction: column; background: #eee; }
#mobile-navigation { display: none; }
#thecols { display: flex; flex: 1; min-height: 0; }
#therows { display: flex; flex-direction: column; width: var(--list-width, 474px); max-width: 70%; min-width: 240px; flex-shrink: 0; }
iframe { display: block; border: 0; min-width: 0; }
#nav-frame { width: 100%; height: 120px; flex-shrink: 0; }
#menu-frame { width: 100%; flex: 1; min-height: 0; }
#entry-frame { flex: 1; width: 0; height: 100%; }
#pane-divider { width: 6px; background: #aaa; cursor: col-resize; touch-action: none; }
body.resizing iframe { pointer-events: none; }
@media (max-width: 800px) {
  #mobile-navigation { display: flex; gap: 8px; padding: 8px; background: #000080; }
  #mobile-navigation button { flex: 1; min-height: 44px; font: bold 16px Arial, sans-serif; border: 2px solid white; border-radius: 5px; color: white; background: transparent; }
  #mobile-navigation button[aria-pressed="true"] { background: white; color: #000080; }
  #thecols { position: relative; }
  #therows, #entry-frame { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; min-width: 0; }
  #pane-divider { display: none; }
  body[data-view="list"] #entry-frame,
  body[data-view="details"] #therows { visibility: hidden; pointer-events: none; }
}